6 ways to achieve vertical centering in css (code example)

What this article brings to you is to introduce 6 ways to achieve vertical centering in CSS (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

html structure

<p>
    <span>垂直居中</span></p>

Default css style structure

.box{
    width:200px;
    height:200px;
    background-color:green;   
}
.content{
    background-color:yellow;   
}

1. table-cell

This method is compatible with IE8, Firefox, and Google, and it does not matter whether the content has width or height. Note: IE8 includes IE8

.box2{
    display:table-cell;      //此元素会作为一个表格单元格显示（类似 <td> 和 </td><th>）
    text-align:center;       //左右居中
    vertical-align:middle;   //上下居中        
}<p style="text-align: center;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/65cfcfdbc7e93d675d00fcd8bf2d6403-0.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>
<p><span style="font-size: 18px"><strong>2. <span style="color: #000000">display: flex ; </span>, </strong> It doesn’t matter whether the content has width or height. Compatible with Firefox and Google</span></p>
<p><span style="font-size: 18px"><span style="color: #000000"><span style="font-size: 14px"> Reference flex layout: https://www.cnblogs.com/qingchunshiguang/p/8011103.html<strong><span style="font-size: 18px"><span style="color: #000000"><span style="font-size: 14px"></span><pre class="brush:php;toolbar:false">.box2{
    display: flex;
    justify-content:center;  //左右居中
    align-items:center;      //上下居中
}

3. Absolute positioning and negative margins

This method is compatible with IE8, Firefox, and Google.
The content must have width and height

.

.box2{
    position:relative;
}
.content2{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-40px;
    margin-left:-40px;
}

4. Absolute positioning and 0

##This method is compatible with IE8 , Firefox, Google, content must have width and height.

.box2{
    position:relative;
}
.content2{
    margin:auto;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

5. Absolute positioning and transform

The Method is not compatible with IE8, but is compatible with IE9, Firefox, and Google. It doesn’t matter whether the content has width or height.

.box2{
    position:relative;
}
.content2{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

##6. display:flex and margin:auto

##content has width and height:

is not compatible with IE8, IE9, content has no width and height:

is not compatible with IE. Both width and height are compatible with Firefox and Google.

.box2{
    display: flex;
    text-align: center;
}
.box2 .content2{margin: auto;}

The above is the detailed content of 6 ways to achieve vertical centering in css (code example). For more information, please follow other related articles on the PHP Chinese website!