縱觀css盒子（標(biāo)準(zhǔn)or非標(biāo)準(zhǔn)）常用的布局中灼狰，我大致分為2類宛瞄，一種是居中，一種是等分交胚。居中包含了水平居中份汗，垂直居中，水平垂直居中蝴簇；等分又包含了等分塊布局杯活，等分高布局。
水平居中
先看看水平居中的布局方案
1. margin + 定寬
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
width: 100px;
margin: 0 auto;
}
</style>
這種定寬居中比較常見的熬词，就不多解釋了
**2. table + margin **
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
display: table;
margin: 0 auto;
}
</style>
display: table 在表現(xiàn)上類似 block 元素旁钧，但是寬度為不定寬吸重。
兼容性：IE8及以上
3. inline-block + text-align
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
display: inline-block;
}
.parent {
text-align: center;
}
</style>
不定款的另一種方式
兼容性：可以兼容 IE 6 和 IE 7
4. absolute + transform
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
定寬的另一種方法，但transform屬于css3的標(biāo)簽（兼容性考慮）
5. absolute + margin-left
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px; /* width/2 */
}
</style>
定寬的另一種方法歪今，相比第四種他的兼容性好
6. flex + justify-content
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content: center;
}
</style>
flex布局嚎幸，未來布局的趨勢(shì)，目前只有兼容性比較差（移動(dòng)端推薦使用）
垂直居中
1. table-cell + vertical-align
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: table-cell;
vertical-align: middle;
}
</style>
兼容性好
2. absolute + transform
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
絕對(duì)定位脫離文檔流寄猩，不會(huì)對(duì)后續(xù)元素的布局造成影響
兼容性不是太好（by the way嫉晶，這里所說的兼容性不太好都意味著對(duì) IE 8 及其以下版本）
3. flex + align-items
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
align-items: center;
}
</style>
同上2一樣，兼容性稍差
水平垂直居中
1. absolute + transform
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
不再贅述焦影，兼容性稍差
2. inline-block + text-align + table-cell + vertical-align
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child {
display: inline-block;
}
</style>
兼容性好车遂，需要兼容性較好的推薦使用
3. flex + justify-content + align-items
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /*垂直居中*/
}
</style>
不再贅述，兼容性稍差
