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

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

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

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

注：為了便於演示，這裡給父元素和子元素都設置了寬高，但是實際情況下，這兩者的寬高經常都是未知的。

要實現的效果如下：

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

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

2、子元素相對定位

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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