關(guān)于css 的垂直居中

caspar 發(fā)布于2019-08-02 15:58 / 2191人閱讀

摘要：之前看了張大大的博客總結(jié)一下我對和的一些認(rèn)知。站在巨人的肩膀上學(xué)習(xí)，再次謝謝張大大阮大大的各種分享。

對于元素的水平居中，我根據(jù)我自己之前的一些學(xué)習(xí)來進(jìn)行一些總結(jié)，如果有不對的地方，歡迎指正~

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

因?yàn)椋罕砀竦膯卧竦奶貏e屬性：垂直居中等；
`div.parent {

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

}
div.parent img{
}`

屬性line-height的設(shè)置
`div.parent{

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

}
div.parent img{

   vertical-align:middle;

絕對定位 + 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.第三種方法我很久以前也有用過，一開始我簡單的認(rèn)為是：由于上下左右都設(shè)置為0了所以 margin auto后元素自適應(yīng)居中，于是某一天我看到了張鑫旭大大的博客才就知道了為什么：引用張大大的話：

1.當(dāng)一個絕對定位元素，其對立定位方向?qū)傩酝瑫r有具體定位數(shù)值的時候，流體特性就發(fā)生了;
   2.因?yàn)閘eft/right同時存在，所以寬度自適應(yīng)于包含塊的padding box寬度，也就是隨著包含塊padding box的寬度變化，包含塊寬度也會跟著一起變。具有流體特性絕對定位元素的margin:auto的填充規(guī)則和普通流體元素一模一樣：
   如果一側(cè)定值，一側(cè)auto，auto為剩余空間大小；如果兩側(cè)均是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;
    }
        //定位額度時候以元素的右上角為參考點(diǎn)，所以我們需要負(fù)值的margin把相差的元素的一半的寬高大小的距離拉回來

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

之前看了張大大的博客,總結(jié)一下我對line-height 和 vertical-align的一些認(rèn)知。vertical-align 的幾個屬性值baseline，bottom，top，middle 等跟文字的基線相關(guān)聯(lián)，而line-height 是無論大小都與文字垂直居中的，比如line-height與高度一致可以設(shè)置文字居中，所以，一樣的道理，vertical-align 跟line-height 可以聯(lián)手設(shè)置垂直居中。

我覺得在網(wǎng)頁的布局中，如果出現(xiàn)任何難理解的奇怪的現(xiàn)象，都可以先從 line-height 和vertical-align 上排除.

以上是我的學(xué)習(xí)總結(jié)，希望大家堅(jiān)持，加油，你不是一個人在奮斗。

站在巨人的肩膀上學(xué)習(xí)，再次謝謝張大大阮大大的各種分享。