css的實現元素垂直居中

經常在寫**的時候碰到垂直居中的問題，我一般用的多的是絕對定位加負的margin或者display: table來實現居中。但是實際專案中，常常有一些特殊的情況，讓上述方法使用起來並不是那麼的靠譜。因此，更多行之有效的方法就顯得尤為重要了。

說明部分

正文開始

子div居中

這個方法使用絕對定位的div，把它的top設定為50％，margin-top設定為負的div高度的一半。

#parent

#child

這個方法使用了乙個position:absolute，有固定寬度和高度的div。這個div被設定為top:0; bottom:0。但是因為它有固定高度，其實並不能和上下都間距為 0，因此margin:auto會使它居中。

#parent

#child

這種方法，在子div外插入乙個div。設定此divheight:50%;margin-bottom為負的子div的height。子div清除浮動，並顯示在中間。

更改上面的html為下面的:

子div居中

css為:

#parent #floater

#child

父div的顯示方式設定為**，因此我們可以使用**的vertical-align

#parent

#child

先將元素定位到容器的中心位置，然後使用transform的translate屬性，將元素的中心和父容器的中心重合，從而實現垂直居中

#parent

#child

使用 transform 有乙個缺陷，就是當計算結果含有小數時（比如 0.5），會讓整個元素看起來是模糊的，一種解決方案就是為父級元素設定transform-style: preserve-3d;樣式：

#parent

#child

使用 flexbox 實現水平和垂直居中，只需使用兩條居中屬性即可

#parent

#child

前端初學者用作整理知識之用，錯誤之處請指正