CSS垂直居中的實現


這個問題可以說是老生常談了,面試時經常問道,一直沒整理過,這次做個系統梳理

1、利用display:table實現

從caniuse.com上查到,display:table可以兼容到IE8,以目前環境大部分場合都沒問題,上代碼

.table{display: table;width: 100%;outline: 1px solid;}
.table>div{display: table-cell;vertical-align: middle;text-align: center;height: 300px;}
.content{outline: 1px solid green;width: 200px;display: inline-block;text-align: left;}
<div class="table">
    <div>
        <span class="content">這個方法把一些 div 的顯示方式設置為表格,因此我們可以使用表格的 vertical-align property 屬性。</span>
    </div>
</div>

適用於內容區寬度,高度不固定的情況

2、利用絕對定位

這是最容易想到的,也是兼容性最好的,但必須知道內容區寬高,上代碼

.absolute-center{outline: 1px solid;position: relative;height: 600px;}
.content{width: 200px; height: 150px; outline: 1px solid green;position: absolute;left: 50%;top:50%;margin-left: -100px;margin-top: -75px;}
<div class="absolute-center">
    <div class="content">
        這個方法把一些 div 的顯示方式設置為表格,因此我們可以使用表格的 vertical-align property 屬性。
    </div>
</div>
margin-left: -100px;margin-top: -75px;

替換成

transform: translateX(-100px) translateY(-75px);

也能達到一樣的效果,只不過要注意兼容問題

這種方式適合與JavaScript一起使用

3、依然是絕對定位

.container{height: 600px; outline: 1px solid;position: relative;}
.content{position: absolute;left: 0;top: 0;right: 0;bottom: 0;width: 200px;height: 100px;outline: 1px solid green;margin: auto;}
<div class="container">
    <div class="content">
        這個方法把一些 div 的顯示方式設置為表格,因此我們可以使用表格的 vertical-align property 屬性。
    </div>
</div>

這里要注意的是一定要設置margin為auto,該屬性的默認是為0,對於從左往右書寫的語言體系,在外邊距采用默認值的情況下,會先計算應用left和top值,right和bottom的值將會用包含塊(通常是父元素)的寬高減去該元素的寬高以及left和right的值得到,這種情況下是無法得到居中效果的

4、利用height和負外邊距

這種方法需要額外增加一個元素

.absolute-center{outline: 1px solid;position: relative;height: 600px;}
.floater{height: 50%;margin-bottom: -75px;}
.content{width: 200px; height: 150px; outline: 1px solid green;background-color: gainsboro;margin: 0 auto;}
<div class="absolute-center">
    <div class="floater"></div>
    <div class="content">
                這個方法把一些 div 的顯示方式設置為表格,因此我們可以使用表格的 vertical-align property 屬性。
    </div>
</div>

 5、利用偽元素占位

.container{height: 600px; outline: 1px solid;text-align: center;}
.container::after{content:"";width: 0;height: 100%;display: inline-block;vertical-align: middle;}
.content{width: 200px;height: 100px;outline: 1px solid green;display: inline-block;vertical-align: middle;}
<div class="container">
    <div class="content">
        這個方法把一些 div 的顯示方式設置為表格,因此我們可以使用表格的 vertical-align property 屬性。
    </div>
</div>

 6、flex

.container{display: flex;text-align: center;height: 400px;outline: 1px solid;}
.content{margin:auto;outline: 1px solid green;}
<div class="container">
    <span class="content">
        這個方法把一些 div 的顯示方式設置為表格,因此我們可以使用表格的 vertical-align property 屬性。
    </span>
</div>

IE edge才實現,其他版本IE都不兼容

7、還是flex

.container{display: flex;justify-content:center;align-items:Center;height: 400px;outline: 1px solid;}
.content{outline: 1px solid green;}
<div class="container">
    <span class="content">
        這個方法把一些 div 的顯示方式設置為表格,因此我們可以使用表格的 vertical-align property 屬性。
    </span>
</div>

 flex方法適用於移動端


注意!

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



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