關於水平垂直居中的幾種方式

1.如果要設定某個元素在窗體中水平垂直居中的話，將此元素設定為絕對定位（不設定其祖先為相對定位，讓其預設針對窗體定位），然後設定元素的margin值為auto,在設定定位的上下左右都為0,即可實現此元素在窗體中水平垂直居中。

如：

margin:auto;
position:absolute;
top:0; 
bottom:0;
left:0;
right:
0;

如果要設定某個子元素在父元素中水平垂直居中的話，只要給父元素設定乙個相對定位就可以了，子元素仍然和上面設定的一樣。

如：

父元素

子元素

2.可以通過定位具體的數值+負的margin值來實現水平垂直居中

流程如下：先將子元素設定為絕對定位，然後top與left都設定為50%,然後margin就設定為負的寬高（可能會加上padding與border的值）的一半。【如何盒子的寬高為百分比的話，此種方法不在生效，margin-top的值不在是一半，而是1/4的樣子】

注意：a. 如果盒子模型是預設的w3c的盒子模型的話，那麼請用寬高+padding+border的值，然後在除於2，作為負的margin值

#container

b. 如果盒子模型是ie6盒子模型的話，那麼請直接用寬高的一半作為負的margin值

#container

3.使用flex布局實現水平垂直居中

流程如下：設定外層盒子為display:flex,然後在設定justify-content:center,aligin-items:center;即可。

display:flex;
justify-content:center;
align-items:center;