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

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

html結構

<p>
    <span>垂直居中</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> 和 </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">2. <strong>display: flex ;      <span style="color: #000000"></span></strong></span></p>
<p><span style="font-size: 18px"><span style="color: #000000">#此方法<span style="font-size: 14px"><strong><span style="font-size: 18px"><span style="color: #000000">不相容IE8，IE9<span style="font-size: 14px"></span></span></span></strong></span>#不相容IE8，IE9</span></span> </p>，<p>content是否有寬高都可以。相容於火狐、Google<span style="font-size: 14px"></span></p>
<p class="cnblogs_code"><br></p>#參考flex版面：https://www.cnblogs.com/qingchunshiguang/p/8011103.html<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"><pre class="brush:php;toolbar:false">.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中文網其他相關文章！