關於css 的垂直居中

小十二發表於2019-02-16
CSS

對於元素的水平居中，我根據我自己之前的一些學習來進行一些總結，如果有不對的地方，歡迎指正~

一、讓大小不固定的元素垂直居中

  1. 因為：表格的單元格的特別屬性：垂直居中等；
    `div.parent {

       display: table-cell;
   vertical-align: middle;
   height: 200px;

    }
    div.parent img{
    }`

  2. 屬性line-height的設定
    `div.parent{

       height: 100px;
   line-height:100px;

    }
    div.parent img{

       vertical-align:middle;

    }`

  3. 絕對定位 + margin:auto;
    div.parent{

       height: 300px;
   width: 300px;
   position: relative;
   background-color: red;

    }
    div.parent img{

       position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto;

    }
    ps.第三種方法我很久以前也有用過，一開始我簡單的認為是：由於上下左右都設定為0了所以 margin auto後元素自適應居中，於是某一天我看到了張鑫旭大大的部落格才就知道了為什麼：引用張大大的話：

    1.當一個絕對定位元素，其對立定位方向屬性同時有具體定位數值的時候，流體特性就發生了;
    2.因為left/right同時存在，所以寬度自適應於包含塊的padding box寬度，也就是隨著包含塊padding box的寬度變化，包含塊寬度也會跟著一起變。具有流體特性絕對定位元素的margin:auto的填充規則和普通流體元素一模一樣：
    如果一側定值，一側auto，auto為剩餘空間大小；如果兩側均是auto, 則平分剩餘空間；

二、大小固定的元素垂直居中

對於大小固定的元素，上面的幾個方法也是可以用的。

1.絕對定位 + margin:-元素的 寬度&&高度

    div.parent{
        height: 200px;
        width: 200px;
        position: relative;
        background-color: red;
    }
    div.parent img{
        width: 100px;
        height: 100px;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-50px;
        margin-top:-50px;
    }
        //定位額度時候以元素的右上角為參考點，所以我們需要負值的margin把相差的元素的一半的寬高大小的距離拉回來

對於固定寬高的還有其它很多方法啦，我就不一一列舉了。

之前看了張大大的部落格,總結一下我對line-height 和 vertical-align的一些認知 。vertical-align 的幾個屬性值baseline，bottom，top，middle 等跟文字的基線相關聯，而line-height 是無論大小都與文字垂直居中的，比如line-height與高度一致可以設定文字居中，所以，一樣的道理，vertical-align 跟line-height 可以聯手設定垂直居中。

我覺得在網頁的佈局中，如果出現任何難理解的奇怪的現象，都可以先從 line-height 和vertical-align 上排除.

以上是我的學習總結，希望大家堅持，加油，你不是一個人在奮鬥。

站在巨人的肩膀上學習，再次謝謝張大大阮大大的各種分享。

相關文章