CSS的居中方式

---

剛學習CSS的時候嘗試過幾種居中的方法,這些方法不須要藉助JS手段,所寫的方法有一個原則,就是在不須要直接人爲的設定好寬高計算後再實現居中,還有諸如table佈局啊、行高設定、margin：auto之類的我就不寫了。

如下幾種方法針對不一樣的瀏覽器,通過測試,從IE8及如下到IE9+、Safari都有不一樣的方法支持。

1.標準瀏覽器全兼容,內容水平居中

.wraper{
        float:left;
        position:relative;
        left:50%;
        clear:both;
    }
    .wraper div{
        border:1px solid palevioletred;
        position:relative;
        left:-50%;
    }

    <div class="wraper">
        <div>瓜迪奧拉</div>
    </div>
    <div class="wraper">
        <div>克洛普克洛普克洛普克洛普克洛普克洛普克洛普</div>
    </div>
    <div class="wraper">
        <div>孔蒂</div>
    </div>
    <div class="wraper">
        <div>穆里尼奧</div>
    </div>
    <div class="wraper">
        <div>溫格</div>
    </div>

這種方法的原理是讓容器層和內層都相對本身移動,容器層移動自身寬度的50%,內層相對於移動自身寬度的-50%。這樣一來外部容器正好能夠將內容垂直的包裹住,而且因爲外部容器是浮動的,因此容器的寬度和內層的寬度一致,這樣能夠作到徹底自適應的實現居中。該方法適用於豎向排版的狀況。

2.IE9+以上的瀏覽器,垂直居中

div{
        position: absolute;
        width:100px;
        height:50px;
        top:0;
        right:0;
        bottom:0;
        left:0;
        margin:auto;
        background:#f60;
    }

    <div></div>

這個方法原理不太清楚,我是這樣理解的,當這個div哪裏也去不了,而後margin仍是auto的時候,他就只能相對於外部容器垂直居中了..

3.IE8及如下的垂直居中

.parent{
        height:500px;
        width:500px;
        font-size:438.6px;/*(font-size:width/114)*/
        background-color:paleturquoise;
    }
    .child{
        background-color:deepskyblue;
        vertical-align:middle;
        zoom:1;
        display:inline;
        width:50px;
        height:50px;
        font:18px/18px "微軟雅黑";
    }
    /*.child必定要寫上font屬性,這個方法在ie中才會實現.*/
    
    <div class="parent">
        <div class="child"></div>
    </div>

這個方法只有IE8及如下才能夠實現,至今也沒明白父級的font-size屬性爲何必定要等於寬度/114,IE真是一個奇葩的存在...在虛擬機下測試這個方法確實有效,子級必定要寫font-size屬性,即便沒有內容也要寫,不然無效。針對IE8如下的兼容性時,這個方法能夠做爲一種hack使用。

4.除IE和Safari以外的標準瀏覽器

IE是指9及如下,我只測試了這些版本的IE,另外Safari也是不支持的。

.box{
        width:600px;
        height:600px;
        border:1px solid palegreen;
        position:relative;
    }
    .item{
        width:200px;
        height:200px;
        border:1px solid palegreen;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);         
    }
    
    
    <div class="box">
        <div class="item"></div>
    </div>

容器和內層都已經脫離了文檔流,內層先移動自身的50%,再經過transform屬性移動自身的-50%,修正後的top、left就正好處於容器內的垂直居中位置了。

5.flex方法

IE依然不支持CSS3是必須的,遺憾的是Safari依然是不支持的,至少在我測試階段(5.1.7)window下尚未支持。

#box{
        width:800px;
        height:800px;
        display:flex;
        border:1px solid palevioletred;
    }
    #box div{
        width:200px;
        height:200px;
        border:1px solid #2189BF;
        flex-direction:row;
        justify-content:center;
        align-self: center;
    }
    
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

flex針對垂直居中的方法比較直接,justify-content:center; align-self: center;這兩個屬性直接設置爲center就能夠了,在不支持CSS3的瀏覽器中是沒法實現的,這也是flex的暫時的缺點之一。