css實現垂直居中


html結構

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

默認css樣式結構

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

1. table-cell     該方法兼容IE8+,火狐,谷歌,並且content是否有寬高都可以。  注:IE8+ 包含 IE8

.box2{
    display:table-cell;      //此元素會作為一個表格單元格顯示(類似 <td> 和 <th>)
    text-align:center;       //左右居中
    vertical-align:middle;   //上下居中        
}

2. display: flex;      該方法不兼容IE8,IE9content是否有寬高都可以。兼容火狐、谷歌

參考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。有無寬高都兼容火狐、谷歌。

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

參考網址:https://www.cnblogs.com/hutuzhu/p/4450850.html


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: