CSS vertical center technique, I only know 23, how many do you know? (vertical-align)

CSS vertical-align

Vertical-align: center Since ancient times Never stopped in the web development demand, demand for vertical alignment, its difficulty also never make it easy for the engineer, after each development after the study of the martyrs, the vertical in a CSS skills is said to have reached nearly 10, but little is known, the vertical in a part of the company and even the CSS skills as an interview subject, its importance, Amos has expanded the number of vertical centralization methods to 23. Today, Amos takes you through the easy way to understand the vertical centralization of CSS.

If you found this article helpful, you can send Amos a cup of coffee here

1. Line-height

Application situation: Single line text vertical center technique

This is probably the most popular way to center data vertically rather than vertically, and is most common in single-line text applications, such as buttons, or menus, navigation, etc. The principle of this method is that if the line height of a single line is set to line-height, the text will be located in the middle of the vertical line height. Using this principle, it is easy to achieve the requirements of vertical centering.

<div class="content">Lorem ipsam.</div>Copy the code

.content{
  width: 400px;
  background: #ccc;
  line-height:100px;
  margin: auto;
}Copy the code

You can also go straight to my Codepen and use line-height to center it vertically

 

2. Line-height + inline-block

Application situation: vertical centering technique for multiple objects

If you can use the first method to vertically center a line object, there’s no reason why you can’t do multiple lines. But you need to treat multiple objects or multi-line objects as one “row” object, so we have to wrap the data in a layer, set it to inline-block, and use line-height instead of height on the outer layer of the inline-block object. This can achieve the purpose of vertical center, even if your data is included in the title and text can also be normal vertical center oh.

<div class="box box2"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  line-height: 200px;
  text-align: center;
}
.box2 .content{
  display: inline-block;
  height: auto;
  line-height:1;
  width: 400px;
  background: #ccc;
  vertical-align: middle;
}Copy the code

You can also go directly to my codepen to see line-height + inline-block vertical center

3. :before + inline-block

Context: Vertical centering of CSS for multiple objects

This approach is basically very literal in the sense of vertical alignment, it’s really vertical alignment between two objects. We use :before with the display: inline-block property and align two inline-block objects vertically. Middle), this is a very traditional vertical alignment technique, the advantage of this method is that the child layer does not need to set the height of the object, we use :before pseudo-class object set to 100% high inline-block, We can use vertical-align for both of our children with the same inline-block property: In the past, this was a great solution for vertical centring, with the exception of the 4 to 5px space between inline-block objects, but it was also useful.

<h2>3.:before + inline-block</h2> <div class="box box3"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  text-align: center;
}
.box::before{
  content:'';
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
.box .content{
  width: 400px;
  background: #ccc;
  display: inline-block;
  vertical-align: middle;
}Copy the code

You can also go directly to my codepen :before + inline-block vertical center

 

4. Absolute + margin negative

Application situation: Multi-line text vertical center technique

Who says position should be used less? Amos argues that there is no such thing as using less and more, but rather whether you “use it well”. Absolute positioning in this example would be top: To grab 50% of the space height, and then set the marign-top of the center object to negative half of its height, so that the object can be centered. This method is spread for many years.

Absolute + margin negative </h2> <div class="box box4"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.box4 .content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top:50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -35px;
}Copy the code

You can also go directly to my codepen to see the vertical centring of absolute + margin negative values

5. absolute + margin auto

Application situation: Multi-line text vertical center technique

Margin: Auto will not work, but when you set top: 0; Margin: auto works. If your absolute position object needs to be centered horizontally in the parent layer, you can also set it to left: 0. right: 0; Margin-left and margin-right are set to auto to center the absolutely positioned object. The downside of this approach is that your object must have a fixed width and height (or %) to center properly.

<h2>5.absolute + margin: Auto </h2> <div class="box box5"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}Copy the code

You can also go directly to my Codepen to see absolute + Margin: Auto vertical center

 

6. absolute + translate

Application situation: Multi-line text vertical center technique

Another method in absolute positioning, this method should be the most convenient, because the positioning object in this positioning does not need fixed width and height, we use the left and top in absolute positioning to set the upper and left sides of the object to be 50% each. Translate (-50%, -50%) By translating 50% of the width and height of the centering object. (CSS3 awesome!!)

<h2>6.absolute + translate(-50%, </h2> <div class="box box6"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.box6 .content{
  width: 400px;
  background: #ccc;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}Copy the code

You can also go directly to my Codepen for absolute + Translate (-50%, -50%)

 

7. Flex + align-items

Application situation: Multi-line text vertical center technique

Flex ! Front end drugs! Back end treasure! Since its launch, it has tested the conscience of web educators, whether to abandon float and embrace Flex. I think everyone has their own idea, but it’s hard to say whether to go for sugar cane or sugar cane first. Since Flex, Flex is really a divine object, we just set the parent layer display: Align -items: center flex and set the sub-axis (cross axis) attribute, the advantage of this method is that this layer does not need to set the height can be automatically center, and the original code is very clean, really use once let you go to heaven.

Flex + align-items</h2> <div class="box box7"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center; 
}
.content{
  width: 400px;
  background: #ccc;
}Copy the code

You can also go directly to my codepen to see how Flex + align-items are centered vertically

 

8. Flex + :before + flex-grow

Application situation: Multi-line text vertical center technique

There are a number of ways Flex allows you to centralize data using Flex grow’s extended feature. In this example, Amos uses Flex-direction: The column is an extension of a traditional technique that uses flex-grow to capture all of the remaining space. Setting it to half of the remaining space will push the content exactly into the vertical center. (In this case, the seventh method is not faster?)

Flex + before + flex-grow</h2> <div class="box box8"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box:before{
  content: '';
  flex-grow: .5;
}
.content{
  width: 400px;
  background: #ccc;
}Copy the code

You can also go to my codepen to see how Flex + before + Flex-grow is centered vertically

 

9. Flex + margin

Application situation: Multi-line text vertical center technique

Continue to use Flex to center objects. Due to the special nature of the Flex object’s space interpretation, we simply set display: Flex on the parent object, and then set Margin: Auto on the object that needs to be centered vertically.

Flex + margin</h2> <div class="box box9"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}Copy the code

You can also go to my Codepen to see how Flex + Margin is centered vertically

 

10. Flex + align-self

Application situation: Multi-line text vertical center technique

Align-self align-self: Center align-self align-self: Center align-self: Center align-self: Center align-self: Center align-self: Center align-self: Center align-self: Center align-self: Center

Flex + align-self</h2> <div class="box box10"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  justify-content: center;
}
.content{
  width: 400px;
  background: #ccc;
  align-self: center
}Copy the code

You can also go to my codepen and see how Flex + align-self is centered vertically

 

11. Flex + align-content

Application situation: Multi-line text vertical center technique

Under normal circumstances, align-conent can only center a sub-row Flex item, but this technique can be used when I’m not sure how many sub-rows there are, and sometimes there may be a single one (of course you can use other methods as well). Since it’s a multi-row flex item, Use :before and :after to add two siblings to a single child object, which can be centered using flex’s align-content property.

Flex + align-content</h2> <div class="box box11"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}
.content{
  width: 400px;
  background: #ccc;
}
.box11:before,
.box11:after{
  content: '';
  display: block;
  width:100%;
}Copy the code

You can also go directly to my Codepen to see Flex + align-content centered vertically

 

12. Grid + template

Application situation: Multi-line text vertical center technique

The most amazing thing about the CSS Grid is the ability to use the template as a canvas. We just need to set the template to three columns and then we can center it vertically.

Grid + template</h2> <div class="box box "> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 
    '. . .'
    '. amos .'
    '. . .';
}
.content{
  width: 400px;
  background: #ccc;
  grid-area: amos;
}Copy the code

You can also go directly to my Codepen to see how Grid + Template is centered vertically

 

13. Grid + align-items

Application situation: Multi-line text vertical center technique

Align-items are not only available in Flex, but also in CSS grid. In Flex align-items are aligned on the cross axis, while in CSS grid align-items are aligned on the Y axis. It’s easy to understand if you think of it as the vertical-align property of a cell in a table.

Grid + align-items</h2> <div class="box box13"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  justify-content: center;
  align-items: center; 
}
.content{
  width: 400px;
  background: #ccc;
}Copy the code

You can also go directly to my Codepen to see Grid + align-items vertically centered

 

14. Grid + align-content

Application situation: Multi-line text vertical center technique

CSS grid align-content is a little different from Flex align-content. CSS Grid interprets space differently from Flex. As a result, align-content only works on multi-line objects in Flex, but not in Grid, so we can happily use align-content to vertically center subitems without any effort.

Grid + align-content</h2> <div class="box box14"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  justify-content: center;
  align-content: center; 
}
.content{
  width: 400px;
  background: #ccc;
}Copy the code

You can also go directly to my Codepen and see Grid + align-content centered vertically

 

15. Grid + align-self

Application situation: Multi-line text vertical center technique

Align-self align-self: Center align-self align-self: Center Align-self align-self: Center Align-self: Center Align-self: Center align-self: Center align-self: Center align-self: Center

Grid + align-self</h2> <div class="box box15"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  justify-content: center;
}
.content{
  width: 400px;
  background: #ccc;
  align-self: center;
}Copy the code

You can also go directly to my Codepen and see Grid + align-self centered vertically

16. Grid + place-items

Application situation: Multi-line text vertical center technique

Place-items is an attribute that stands for align-items and context-items. You can center it by setting center.

Grid + place-items</h2> <div class="box box16"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  height: 150px;
  margin: 0 auto;
  place-items: center;
}
.content{
  width: 400px;
  background: #ccc;
}Copy the code

You can also go directly to my Codepen to see Grid + place-items centered vertically

 

17. Grid + place-content

Application situation: Multi-line text vertical center technique

Place-content is short for align-content and justify-content, and center can be set to center.

Grid + place-content</h2> <div class="box box17"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  height: 150px;
  margin: 0 auto;
  place-content: center;
}
.content{
  width: 400px;
  background: #ccc;
}Copy the code

You can also go directly to my Codepen to see Grid + place-content centered vertically

 

18. Grid + margin

Application situation: Multi-line text vertical center technique

Margin: Auto margin: auto margin: Auto margin: Auto margin: Auto margin: Auto margin: Auto margin: Auto margin: Auto margin: Auto margin: Auto margin: Auto margin (yi? How can this description ever be similar?

Grid + margin</h2> <div class="box box18"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
}
.content{
  width: 400px;
  background: #ccc;
  margin:auto;
}Copy the code

You can also go directly to my Codepen to see Grid + Margin vertical center

 

19. Display: table-cell

Application situation: Multi-line text vertical center technique

The idea behind this is to use the CSS display property to set div as a table storage cell (TD). This allows data to be centered vertically using the vertical-align: middle property, which supports vertical cell alignment.

<h2>19.display: Table-cell </h2> <div class="box box19"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}Copy the code

You can also go directly to my codepen to see the display: table-cell vertical center

 

20. calc

Application situation: Multi-line text vertical center technique

Calc stands for Calculator, a CSS method developed by Microsoft that could be a boon to web development. We can actually do calculations right on the web! ? This is really too powerful, from now on we no longer have to rack their brains in the calculation of mathematics, or try to use JavaScript to dynamic calculation, we can easily use calc() this “computer” method, to the percentage of real-time and dynamic calculation of the actual height, it can be said to be an epoch-making method ah! But this method needs to pay attention to is too much use, webpage efficiency will be relatively poor, so please carefully use oh.

Calc </h2> <div class="box box20"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
}
.content{
  width: 400px;
  background: #ccc;
  position: relative;
  top:calc((100% - 70px) / 2);
  margin:auto;
  height: 70px;
}Copy the code

You can also go straight to my Codepen and see how calC is centered vertically

 

21. Relative + translateY

Application situation: Multi-line text vertical center technique

This technique uses Top: 50% move to create a fixed % distance on top of your object, and then have the object itself use tranlateY % for vertical centering. Translate is a nice attribute, Since percentage units of translate use the size of the object itself as 100%, this makes it much easier to use the width and height of the object itself.

</h2> <div class="box box21"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
}
.content{
  width: 400px;
  background: #ccc;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
}Copy the code

You can also go directly to my Codepen to see how Relative + translateY(-50%) is vertically centered

 

22. Padding

Application situation: Multi-line text vertical center technique

“What! This also calculate vertical position middle skill? Connect my grandmother all know this way?!!”

Right! This is a vertical center, admittedly so simple that some developers think it’s not a vertical center technique, but you can’t argue with the fact that my data is vertical center XDDD, ok! Call me a hollow. You’re right! Good! ? (be)

Padding </h2> <div class="box box22"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  height: auto;
  padding: 50px 0;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}Copy the code

You can also go straight to my Codepen and use the padding to center it vertically

 

23. Writing-mode

Application situation: Multi-line text vertical center technique

The idea was inspired by my old friend Paul. The function of the writing-mode CSS property has nothing to do with vertical center. It is used to change the direction of text from horizontal to straight, and it has been supported since early IE5. However, Amos was rarely used at that time, because most of the web pages were horizontal text, and other browsers except Internet Explorer did not seem to have good support, so it was rarely used.

Use writing-mode to turn an entire text container into a straight text, then use text-align for the container: If you want to align the text in a straight line, you can align the text in a straight line. If you want to align the text in a straight line, you can align the text in a straight line. However, it is important to note that the browser support for this syntax needs to be unwritten, otherwise some browsers eat different syntax, which may make your page look invalid on some browsers, which is the most important thing to note.

Writing -mode</h2> <div class="box box23"> <div class="content" Href = "http://csscoke.com/2015/07/31/nth-child_rwd_album/" > CSS 3 effect of exquisite album < / a > effect! Don't forget to drag the RWD window to see what it looks like! The idea for this centering came from Paul </div> </div>Copy the code

h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  writing-mode: tb-lr; /* for ie11 */
  writing-mode: vertical-lr;
  text-align: center;
  margin:0 auto;
}
.content{
  width: 400px;
  background: #ccc;
  display: inline-block; /* for ie & edge */
  width: 100%;
  writing-mode: lr-tb;
  margin: auto; 
  text-align: left;
}
.box .txt{
  width: 80%;
  margin: auto;
}Copy the code

You can also go directly to my Codepen to see how to use writing-mode for vertical centring

 

There are several ways you’ve written it

See these 23 vertical center CSS, do you know which ones you have used? Do you have a trick that no one knows about? Welcome to Amos

Amos: It’s been so long. It’s exhausting to write this long article once

If you found this article helpful, you can send Amos a cup of coffee here

 

::before
vertical-align
original
In the vertical place
teaching