Summary of several methods of realizing vertical center in CSS

Time:2020-1-22

In the process of front-end layout, it is easy for us to realize horizontal centering, which can be realized through margin: 0 Auto; and parent element text align: Center. But it’s not so easy to realize the vertical center. Let’s share some ways to realize the vertical center in my work.

1. Line height equals height / line height only

This method is more suitable for text centering. The core is to set the line height equal to the height of the box around him, or only set the line height without setting the height. This method is more convenient and useful for the scene where the text is centered and the height is fixed.


//html
<div class="middle">555</div>
 
//css
.middle{
  height: 50px;
  line-height: 50px;
  background: red;
}

It should be noted that

If it is an inline element, because it has no height, you need to convert the inline element to an inline block or block element first.

2、vertical-align: middle

This implementation element needs to be centered with the parent element set with a row height equal to its own height, and this element is an inline block element. Only when all three conditions are met can the vertical center be realized. The code is as follows:

//html
<div class="main">
   <div class="middle"></div>
</div>

//css
.main {
  width: 200px;
  height: 300px;
  line-height: 300px;
  background: #dddddd;
}
.middle{
  background: red;
  width: 200px;
  height: 50px;
  Display: inline block; // or display: inline table;
  vertical-align: middle;
}

It should be noted that this method needs a fixed row height, and the realization of centering is actually approximate centering, not the real meaning of centering.

3. Absolute positioning plus negative margin

The core of this method is to first set the element to be centered as an absolute location, and then set its top: 50%; add margin top equal to half of the negative height of itself to realize the centering. The advantage is that it is convenient to implement, and the height of the parent element can be a percentage, and the row height is not required. The code is as follows:

//html
<div class="main">
  <div class="middle"></div>
</div>
  
//css
.main {
  width: 60px;
  height: 10%;
  background: #dddddd;
  Position: relative; // the parent element is set to relative position
}
.middle{
  Position: absolute; // set to absolute position
  Top: 50%; // top value is 50%
  Margin top: - 25%; // set margin top to half of the element height
  width: 60px;
  height: 50%;
  background: red;
}

4. Absolute positioning plus margin: Auto

First code:

//html
<div class="main">
  <div class="middle"></div>
</div>
  
//css
.main {
  width: 60px;
  height: 10%;
  background: #dddddd;
  Position: relative; // the parent element is set to relative position
}
.middle{
  width: 30%;
  height: 50%;
  Position: absolute; // set to absolute position
  top: 0;
  Bottom: 0; // set 0 for top and bottom,
  Left: 0; // if left and right are also set to 0, horizontal and vertical centers can be achieved
  right: 0;
  margin:auto;
  background: red;
}

The advantage of this method is that it can not only realize vertical centering, but also realize horizontal centering. The disadvantage is that in the case of bad network or performance, there will be cases where boxes are not directly set in place, resulting in poor user experience.

5. Flex layout

Flex layout can easily realize vertical and horizontal centering, with many advantages. It is widely used on the mobile side, and the disadvantage is that browser compatibility is not good. The code is as follows:

//html
<div class="main">
  <div class="middle"></div>
</div>
 
//css
.main {
  width: 60px;
  height: 10%;
  background: #dddddd;
  Display: Flex; // set to flex
  Justify content: Center; // center horizontally
  Align items: Center; // center vertically
}
.middle{
  width: 30%;
  height: 50%;
  background: red;
}

summary

The above is a summary of several methods of CSS vertical center introduced by Xiaobian to you. I hope it can help you. If you have any questions, please leave me a message, and Xiaobian will reply you in time!