css實(shí)現(xiàn)垂直水平居中的方法多種溃斋，各種方法各有優(yōu)劣撇吞，查閱網(wǎng)上資料，自己總結(jié)于此老客，方便日后應(yīng)用拭荤。
1. 絕對(duì)定位居中
.box {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
overflow: auto;
width: 50%;
height: 50%;
margin: auto;
}
優(yōu)點(diǎn)：
- 支持跨瀏覽器茵臭，包括IE8-IE10.
- 無(wú)需其他特殊標(biāo)記，CSS代碼量少
- 支持百分比%屬性值和min-/max-屬性
- 只用這一個(gè)類可實(shí)現(xiàn)任何內(nèi)容塊居中
- 不論是否設(shè)置padding都可居中（在不使用box-sizing屬性的前提下）
- 內(nèi)容塊可以被重繪
- 完美支持圖片居中
缺點(diǎn)：
- 必須聲明高度
- 建議設(shè)置overflow:auto來(lái)防止內(nèi)容越界溢出
- 在Windows Phone設(shè)備上不起作用
2.負(fù)外邊距居中
塊元素尺寸已知舅世，外邊距margin取負(fù)數(shù)旦委，大小為width/height（不使用box-sizing: border-box時(shí)包括padding）的一半，再加上top: 50%; left: 50%;
.box{
position: absolute;
top: 50%; left: 50%;
width: 200px;
height: 200px;
padding: 60px;
margin-left: -130px;
margin-top: -130px;
}
優(yōu)點(diǎn)：
- 兼容IE6雏亚，7
缺點(diǎn)：
- 不能自適應(yīng)缨硝。不支持百分比尺寸和min-/max-屬性設(shè)置。
- 內(nèi)容可能溢出容器罢低。
- 邊距大小與padding,和是否定義box-sizing: border-box有關(guān)查辩，計(jì)算需要根- 據(jù)不同情況。
3. Transforms居中
.box{
position: absolute;
top: 50%; left: 50%;
width: 50%;
margin: 0 auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
優(yōu)點(diǎn)：
- 內(nèi)容可變高度
缺點(diǎn)：
IE8不支持
屬性需要寫瀏覽器廠商前綴
可能干擾其他transform效果
某些情形下會(huì)出現(xiàn)文本或元素邊界渲染模糊的現(xiàn)象
4. Table-Cell居中
HTML
<div class="container">
<div class="box">
<div class="centent">
</div>
</div>
</div>
CSS
.container {
display: table;
width: 500px;
height: 500px;
}
.box {
display: table-cell;
vertical-align: middle;
}
.centent {
width: 50%;
margin: 0 auto;
}
優(yōu)點(diǎn)：
- 高度可變
- 內(nèi)容溢出會(huì)將父元素?fù)伍_(kāi)
- 跨瀏覽器兼容性好
缺點(diǎn)：
- 需要額外html標(biāo)記
5. Flex居中
.container {
display: flex;
flex-direction: column; /* 改變排列方向 */
justify-content: center;
align-items: center;
}
優(yōu)點(diǎn)：
- 內(nèi)容塊的寬高任意奕短，優(yōu)雅的溢出
- 可用于更復(fù)雜高級(jí)的布局技術(shù)中
缺點(diǎn)：
- IE8/IE9不支持宜肉。
- Body需要特定的容器和CSS樣式。
- 運(yùn)行于現(xiàn)代瀏覽器上的代碼需要瀏覽器廠商前綴翎碑。
- 表現(xiàn)上可能會(huì)有一些問(wèn)題
