純css實現垂直居中的方法

垂直居中是布局中十分常見的效果之一，為實現良好的相容性，pc端實現垂直居中的方法一般是通過絕對定位，table-cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化；在面試中也是經常問到的考點，現在我們一起來複習一下這些垂直居中的方法;

"parent">

"child">我是內容
複製**

.parent複製**

對於pc端，一般chrome（測試版本：49.0.2623.110 m）和火狐（測試版本：49.0.2）都能很好地支援。ie不支援，顯示的是順序排列下來的寬度100%的模組。

對於移動端：

.parent

.child複製**

此方法對子節點沒固定寬高不適用;相容性較好

.parent

.child複製**

ie 10、firefox、opera 、chrome支援 transform 屬性。

internet explorer 9 支援替代的 -ms-transform 屬性（僅適用於 2d 轉換）。

safari 和 chrome 支援替代的 -webkit-transform 屬性（3d 和 2d 轉換）。

所以再用這個方法的時候最好是加上瀏覽器字首

.parent

.child複製**

此方法要求子節點有寬高，相容性較好

.parent

.child複製**

.parent

.child複製**

也可以參考這篇文章

純CSS實現垂直居中

垂直居中是布局中十分常見的效果之一，為實現良好的相容性，pc端實現垂直居中的方法一般是通過絕對定位，table cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化。html結構 垂直居中 方法1 table cell box1方法2 display flex box1方法3 絕對...

純CSS實現垂直居中的幾種方法

垂直居中是布局中十分常見的效果之一，為實現良好的相容性，pc端實現垂直居中的方法一般是通過絕對定位，table cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化。方法1 table cell html結構 垂直居中 方法2 display flex box2 方法3 絕對定位和...

純CSS實現垂直居中的幾種方法

垂直居中是布局中十分常見的效果之一，為實現良好的相容性，pc端實現垂直居中的方法一般是通過絕對定位，table cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化。方法1 table cell html結構 垂直居中 方法2 display flex box2 方法3 絕對定位和...