本文只摘錄個(gè)人認(rèn)為比較簡(jiǎn)單易懂怀估，應(yīng)用比較全面的方法，至于老弱殘的IE 5沼琉，6北苟，7 不在考慮范圍
// 基本樣式與html結(jié)構(gòu)
.parent{
//width:200px;
// height:800px;
background:#000;
}
<div class="parent">
<div class="child" ></div>
</div>
1. flex 布局（new）
優(yōu)點(diǎn)：設(shè)置簡(jiǎn)單，適合移動(dòng)端使用
缺點(diǎn)：不支持老舊版本的瀏覽器打瘪，如Android 4.4 以下（鑒于目前市面上基本沒(méi)有這么低級(jí)的Android版本了友鼻，缺點(diǎn)可忽略）
.parent{
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.child{
}
2. flex 布局（old）
優(yōu)點(diǎn)：基本能滿足移動(dòng)端需求，相對(duì)新 flex 布局瀏覽器支持度高
缺點(diǎn)：子元素必須是塊級(jí)的元素
.parent{
display: -webkit-box;
display: box;
-webkit-box-pack: center;
box-pack: center;
-webkit-box-align: center;
box-align: center;
}
.child{
}
3 table-cell
優(yōu)點(diǎn)：兼容 IE8 及以上闺骚，內(nèi)容溢出會(huì)將父元素?fù)伍_(kāi)彩扔，父元素不設(shè)置寬高會(huì)自動(dòng)緊貼
缺點(diǎn)：父元素不支持margin屬性，子元素不能是塊級(jí)元素
.parent{
display:table-cell;
text-align: center;
vertical-align: middle;
}
.child{
display:inline-block;
}
4. position: absolute + margin: auto
優(yōu)點(diǎn)：兼容 IE8 及以上
缺點(diǎn)：父元素必須聲明高度
.parent{
position:relative;
}
.child{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
5. position: absolute + translate
優(yōu)點(diǎn)：代碼量少
缺點(diǎn)：IE9以下僻爽，不支持transform屬性的瀏覽器無(wú)法使用虫碉，父元素必須聲明高度，可能干擾其他transform效果胸梆，某些情況下會(huì)出現(xiàn)文本或元素邊界渲染模糊的現(xiàn)象
.parent{
position: relative;
}
.child{
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
