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 class="box box2">
    <span class="content content2">垂直居中</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> 和 <th>）
    text-align:center;       //左右居中
    vertical-align:middle;   //上下居中        
}

2. display: flex ; , It doesn’t matter whether the content has width or height. Compatible with Firefox and Google

Reference flex layout: https://www.cnblogs.com/qingchunshiguang/p/8011103.html

.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!