css實作垂直居中的6種方法（程式碼範例）

本篇文章帶給大家的內容是介紹css實作垂直居中的6種方法（程式碼範例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

html結構

<p class="box box2">
    <span class="content content2">垂直居中</span></p>

#預設css樣式結構##

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

1. table-cell     

#此方法相容於IE8 ，火狐，Google，且content是否有寬高都可以。 註：IE8 包含IE8

.box2{
    display:table-cell;      //此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
    text-align:center;       //左右居中
    vertical-align:middle;   //上下居中        
}

2. display: flex ;      

#此方法不相容IE8，IE9#不相容IE8，IE9

，

content是否有寬高都可以。相容於火狐、Google

#參考flex版面：https://www.cnblogs.com/qingchunshiguang/p/8011103.html

.box2{
    display: flex;
    justify-content:center;  //左右居中
    align-items:center;      //上下居中
}

3. 絕對定位與負邊界     

該方法相容於IE8 ，火狐，谷歌，content必須有寬高。

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

4. 絕對定位與 0       

#此方法相容於IE8 ，火狐，谷歌，content必須有寬高。

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

5. 絕對定位與 transform     #該方法不相容IE8，相容IE9 ，火狐，谷歌，

#content是否有寬高都可以。

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

6. display:flex 與margin:auto      #content有寬高：不相容IE8， IE9，content沒有寬高：不相容IE。有無寬高都相容火狐、Google。

########################

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

以上是css實作垂直居中的6種方法（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！