Summary of Several Methods for Implementing Vertical Centering with CSS

In the front-end layout process, it is relatively simple to achieve horizontal centering, which can usually be achieved through margin:0 auto; and parent element text-align: center;. But it is not so easy to achieve vertical centering. Below I will share with you several methods I use to achieve vertical centering in my work.

1. Line-height is equal to height/only set line-height

This method is more suitable for centering text. The core is to set the line-height equal to the height of the box that wraps it, or to set the line-height without setting the height. This method is suitable for scenes where text is centered and the height is fixed. It is convenient and useful to use.

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

It is worth noting that

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

2. vertical-align: middle

This kind of element centering requires that the parent element has a line height equal to its own height, and this element is an inline block element. Only when all three conditions are met can vertical centering be achieved. 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 requires a fixed line height, and the centering achieved is actually approximate centering, not true centering.

3. Absolute positioning plus negative margins

The core of this method is to first set the element to be centered to absolute positioning, and then set its top: 50%; plus margin-top equal to the negative half of its own height to achieve centering. The advantage is that it is easier to implement, the height of the parent element can be a percentage, and there is no need to set the line height. The code is as follows:

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

4. Absolute positioning plus margin:auto

First the code:

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

The advantage of this method is that it can not only achieve vertical centering, but also horizontal centering. The disadvantage is that when the network or performance is poor, the box may not be directly fixed in place, resulting in a poor user experience.

5. Flex layout

Flex layout can easily achieve vertical and horizontal centering, which has many advantages and is widely used on mobile terminals. The disadvantage is that it has poor browser compatibility. 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; // horizontal center align-items: center; // vertical center}
.middle{
  width: 30%;
  height: 50%;
  background: red;
} 

Summarize

The above is a summary of several methods of achieving vertical centering with CSS that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time!