關於css 的垂直居中

時間 2019-11-11

標籤關於 css 垂直居中欄目 CSS 简体版

原文原文鏈接

對於元素的水平居中，我根據我本身以前的一些學習來進行一些總結，若是有不對的地方，歡迎指正~wordpress

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

由於：表格的單元格的特別屬性：垂直居中等；
`div.parent {佈局
```
display: table-cell;
   vertical-align: middle;
   height: 200px;
```
}
div.parent img{
}`學習
屬性line-height的設置
`div.parent{code
```
height: 100px;
   line-height:100px;
```
}
div.parent img{get
```
vertical-align:middle;
```
}`博客
絕對定位 + margin:auto;
div.parent{it
```
height: 300px;
   width: 300px;
   position: relative;
   background-color: red;
```
}
div.parent img{io
```
position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto;
```
}
ps.第三種方法我好久之前也有用過，一開始我簡單的認爲是：因爲上下左右都設置爲0了因此 margin auto後元素自適應居中，因而某一天我看到了張鑫旭大大的博客才就知道了爲何：引用張大大的話：table

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

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

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

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 上排除.

以上是個人學習總結，但願你們堅持，加油，你不是一我的在奮鬥。

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