Detailed code examples of seven methods for vertical centering with CSS

When we edit a layout, we usually use horizontal centering and vertical centering to design it. Horizontal centering is easy to handle. You just need to set margin:0 auto; or text-align:center; to easily solve the problem of horizontal centering. However, the most troublesome alignment problem has always been the annoying setting of "vertical centering". The following will introduce seven ways to use vertical centering simply using CSS.

Seven ways to vertically center

1. Setting line-height
2. Adding pseudo-elements
3. calc dynamic calculation
4. Use a table or pretend table
5. transform
6. Absolute positioning
7. Using Flexbox

Setting line-height

Setting the line-height is the simplest way to vertically center something. It works for "single-line" "inline elements" (inline, inline-block), such as a single-line title, or a div that has been set to the inline-block attribute. If you set the line-height to the same value as the height, the inline elements of the content will be vertically centered. Because it is the line height, 1/2 of the line height will be added to the top and bottom of the inline elements, so they are vertically centered! However, from this we can see why we must have single-line inline elements, because if there are multiple lines, the distance between the second line and the first line will become too large, which is not the effect we expect. CSS example:

.div0
{  
width:200px;  
height:150px;  
border:1px solid #000;  
line-height:150px;  
text-align:center;
}
.redbox
{  
display:inline-block; 
 width:30px; 
 height:30px; 
 background:#c00;}

Add pseudo-elements (::before, ::after)

The first method is the simplest method (suitable for single-line titles), but it only works for a single line. So if we want to vertically center multi-line elements, we must use pseudo-elements. Before that, let me first explain the vertical-align property in CSS. Although this property is vertical centering, it means that all elements within the element are vertically centered with each other, not vertically centered relative to the height of the outer frame. (The following CSS will create this vertical centering)

.div0{
  width:200px;
  height:150px;
  border:1px solid #000;
  text-align:center;
}
.redbox{
  width:30px;
  height:30px;
  background:#c00;
  display:inline-block;
  vertical-align:middle;
}
.greenbox{
  width:30px;
  height:60px;
  background:#0c0;
  display:inline-block;
  vertical-align:middle;
}
.bluebox{
  width:30px;
  height:40px;
  background:#00f;
  display:inline-block;
  vertical-align:middle;
}

Therefore, if one block becomes 100% height, the other blocks will be truly vertically centered.

.greenbox{
  width:30px;
  height:100%;
  background:#0c0;
  display:inline-block;
  vertical-align:middle;
}

But we can't always add a weird div in it every time we want to center it vertically! So we have to use the "pseudo-elements" and use ::before and ::after to add divs into the lever, and make the height of this "pseudo" div 100%, so that other divs can be easily centered. But but but! Remember to set the display of div to inline-block. After all, vertical-align: middle is for inline elements, and div itself is a block, so changes must be made!

.div0::before{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  position:relative;
  vertical-align:middle;
  background:#f00;
}

calc dynamic calculation

You may have questions when you see this. If my div must be a block today, how can I make it vertically centered? At this time, we must use CSS's unique calc dynamic calculation capability. We only need to set the top attribute of the div to be centered to a distance of "50% of the outer frame height + 50% of the div height" from the top to achieve vertical centering. As for why margin-top is not used, it is because margin is relative to the horizontal width, so top must be used to be correct.

.div0{
  width:200px;
  height:150px;
  border:1px solid #000;
}
.redbox{
  width:30px;
  height:30px;
  background:#c00;
  float:left;
  top:calc(50% - 15px);
  margin-left:calc(50% - 45px);
}
.greenbox{
  width:30px;
  height:80px;
  background:#0c0;
  float:left;
  top:calc(50% - 40px);
}
.bluebox{
  width:30px;
  height:40px;
  background:#00f;
  float:left;
  top:calc(50% - 20px);
}

Use a table or pretend table

Perhaps some people will find that it is quite easy to achieve vertical centering in the DOM commonly used in HTML tables. All you need is a line of vertical-align: middle. Why? The main reason is that the display of table is table, while the display of td is table-cell. So in addition to using the table directly, we can also change the display of the parent element of the element to be vertically centered to table-cell, which can be easily achieved. However, modifying the display sometimes also causes a chain effect on other style attributes, so you need to be more careful when using it.

HTML:

<table>
    <tr>
        <td>
            <div>Table vertically centered</div>
        </td>
    </tr>
</table>
<div class="like-table">
    <div>False table vertically centered</div>
</div>

CSS:

.like-table{
    display:table-cell;
}
td,
.like-table{
    width:150px;
    height:100px;
    border:1px solid #000;
    vertical-align: middle;
}
td div,
.like-table div{
    width:100px;
    height:50px;
    margin:0 auto;
    color:#fff;
    font-size:12px;
    line-height: 50px;
    text-align: center;
    background:#c00;
}
.like-table div{
    background:#069;
} 

transform

Transform is a new attribute of CSS3, which mainly controls the deformation, rotation and displacement of elements. By using translateY in transform (changing the vertical displacement, if using percentage as the unit, it is based on the length and width of the element itself), combined with the top attribute of the element itself, you can achieve the effect of vertical centering. What you need to pay attention to is that the child element must be added with position:relative, otherwise there will be no effect.

.use-transform{
    width:200px;
    height:200px;
    border:1px solid #000;
}
.use-transform div{
    position: relative;
    width:100px;
    height:50px;
    top:50%;
    transform:translateY(-50%);
    background:#095;
} 

Absolute positioning

Absolute positioning is position:absolute in CSS, which uses absolute position to specify. However, the method of vertical centering is different from our orthodox absolute position. It is to set the top, bottom, left and right values ​​to 0, and then use margin:auto to achieve vertical centering. However, it should be noted that for child elements with absolute positioning, the position of their parent element must be specified as relative! Moreover, absolutely positioned elements will cover each other, so if there are many content elements, there may be some problems.

.use-absolute{
    position: relative;
    width:200px;
    height:150px;
    border:1px solid #000;
}
.use-absolute div{
    position: absolute;
    width:100px;
    height:50px;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    background:#f60;
} 

Using Flexbox

Using the align-items or align-content properties, you can easily achieve the effect of vertical centering.

.use-flexbox{
    display:flex;
    align-items:center;
    justify-content:center;
    width:200px;
    height:150px;
    border:1px solid #000;
}
.use-flexbox div{
    width:100px;
    height:50px;
    background:#099;
} 

The above are some methods of vertical centering. Since vertical centering often involves modifying the display attribute, it often has some impact on the layout. For example, if flexbox is used where flexbox should not be used, table is used where table should not be used, and inline-block is used where inline-block should not be used, you will have to write many other positioning styles to correct it later, which is a bit of putting the cart before the horse. Therefore, how to make use of these CSS vertical centering methods depends on your layout structure and use them flexibly!

Summarize

The above is a detailed explanation of the seven methods of implementing 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!