水平、垂直居中，是CSS中經常用到的，也是面試必考題，居中有很多種方式，今天一篇文章，徹底說全、說透！
譬如，要實現以下效果：
QQ群786276452
CSS實現水平、垂直居中，N種方法，徹底說透！
方法一：absolute + 負margin （此方法好理解，相容性OK，缺點是需要知道子元素的寬高）
/*css程式碼*/
.dbig{
border: 1px solid red;
width: 300px;
height: 300px;
position: relative;
}
.box {
background: green;
}
.box.size{
width: 100px;
height: 100px;
position: absolute;;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
方法二：absolute + margin auto（此方法相容性也很好，缺點是需要知道子元素的寬高）
/*css程式碼*/
.dbig{
position: relative;
}
.box {
position: absolute;;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
方法三：absolute + calc（此方法相容性依賴calc的相容性，缺點是需要知道子元素的寬高）
/*css程式碼*/
.dbig{
position: relative;
}
.box {
position: absolute;;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
方法四：absolute + transform（這種方法相容性依賴translate2d的相容性）
/*css程式碼*/
.dbig{
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
方法五：lineheight（此方法需要在子元素中將文字顯示重置為想要的效果）
/*css程式碼*/
.dbig{
line-height: 300px;
text-align: center;
font-size: 0px;
}
.box {
font-size: 16px;
display: inline-block;
vertical-align: middle;
line-height: initial;
text-align: left; /* 修正文字 */
}
方法六：css-table（css新增的table屬性，可以讓把普通元素變為table元素的現實效果，通過這個特性也可以實現水平垂直居中，這種方法和table一樣的原理，但卻沒有那麼多冗餘程式碼，相容性也還不錯）
/*css程式碼*/
.dbig{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box {
display: inline-block;
}
方法七：flex（目前在移動端已經完全可以使用flex了，PC端需要看自己業務的相容性情況）
/*css程式碼*/
.dbig{
display: flex;
justify-content: center;
align-items: center;
}
總結1：
1、PC端有相容性要求，寬高固定，推薦absolute + 負margin
2、PC端有相容要求，寬高不固定，推薦css-table
3、PC端無相容性要求，推薦flex
4、移動端推薦使用flex
總結2：相容性
方法
居中元素定寬高固定PC相容性移動端相容性
1）absolute + 負margin
ie6+, chrome4+, firefox2+安卓2.3+, iOS6+absolute + margin auto是ie6+, chrome4+, firefox2+安卓2.3+, iOS6+
2）absolute + calc
ie9+, chrome19+, firefox4+安卓4.4+, iOS6+
3）absolute + transform
ie9+, chrome4+, firefox3.5+安卓3+, iOS6+
4）lineheight
ie6+, chrome4+, firefox2+安卓2.3+, iOS6+
5）css-table
ie8+, chrome4+, firefox2+安卓2.3+, iOS6+
6）flex
ie10+, chrome4+, firefox2+安卓2.3+, iOS6+