css元素水平垂直居中的十種方法

前端時間在面試過程當中問到了父元素中子元素水平和垂直居中的實現方法，由於平時疏於整理，只想到兩種，如今回想到這個問題，因此針對各類狀況集中整理一下。

首先看頁面結構和元素的基本樣式：

<div class="parent" style="width: 400px;height: 200px;background: #797099;">
    <div class="child" style="width: 200px;height: 100px;background: #eee;"></div>
</div>

 注：爲了便於演示，這裏給父元素和子元素都設置了寬高，可是實際狀況下，這二者的寬高常常都是未知的。

 要實現的效果以下：

一、父元素設置高度等於行高

只在父元素高度已知，而且子元素是文本的狀況下適用。

二、子元素相對定位

這種方法只在子元素寬高已知的狀況下適用。

三、子元素相對於父元素絕對定位，並配合使用負值的 margin

最多見的方法，這種方法只能在子元素寬高已知的狀況下使用。

四、子元素相對父元素絕對定位，並使用 calc() 計算屬性

思想同上一種方法，只不過用計算屬性替代了偏移量和 margin

 五、子元素相對於父元素絕對定位(偏移量都爲0)，子元素設置margin:auto;

這種方式一樣只在子元素高寬已知的狀況下使用。

 

六、父元素設置 display：table-cell 和 vertical-align：middle; 子元素設置 margin: auto;（低版本IE會有問題）

七、父元素設置  display：table-cell 以及內容的水平和垂直居中，子元素設置爲行內塊（低版本IE沒有問題）

八、父元素 display:flex; 子元素 margin:auto;

最簡單的方式，子元素寬高已知未知的狀況都適用。　

 

九、父元素設置 display:flex; 以及內容的水平和垂直居中（有兼容問題）

十、子元素相對父元素決定定位，並使用 transform 屬性

這種方式和第3、四種方法相似，只不過是用了 translate 偏移量實現了負值 margin 的效果。

不過不一樣的地方在於，使用 translate 對子元素的寬高沒有要求，在未知寬高的狀況下依然適用。

這種方式在子元素是單行或多行文本的時候要求垂直居中的狀況下十分適用。