關(guān)于水平垂直居中想必大家一定不陌生了，對于前端工程師來說它是基礎(chǔ)中的基礎(chǔ)也是重點(diǎn)中的重點(diǎn)躺苦，我在剛剛接觸div+css布局的時(shí)候經(jīng)常因?yàn)槿绾螌?shí)現(xiàn)水平垂直居中而困擾源葫。下面是我不斷積累和總結(jié)出來的常見實(shí)現(xiàn)方案。
一哈恰、水平居中
1.內(nèi)聯(lián)元素
text-align:center;
2.塊級(jí)元素
上下外邊距為0只估，左右外邊距自適應(yīng)。
margin:0 auto;
二着绷、水平垂直居中
1.寬高固定時(shí)
通過絕對定位和外邊距來實(shí)現(xiàn)蛔钙。缺點(diǎn)十分明顯，不能自適應(yīng)荠医。不支持百分比尺寸和min-/max-屬性設(shè)置并且當(dāng)含有內(nèi)邊距的時(shí)候需要一定的計(jì)算量吁脱。
#parent
{
height:200px;
width:200px;
background: yellow;
position: relative;
}
#child
{
height: 100px;
width: 100px;
background: red;
position: absolute;
left: 50%;
top:50%;
margin-left:-50px;/*如果有padding的話就是(width+內(nèi)邊距)/2*/
margin-top: -50px;/*同上*/
}
2.改進(jìn)版
當(dāng)寬高不固定的時(shí)候，可以通過css3的transform的translate屬性來進(jìn)行子層的位置調(diào)整彬向。這種方案是上述方案的改進(jìn)版兼贡，但是需要實(shí)現(xiàn)兼容各瀏覽器的hack代碼。
#parent
{
height:200px;
width:200px;
background: yellow;
position: relative;
}
#child
{
height: 100px;
width: 100px;
background: red;
position: absolute;
left: 50%;
top:50%;
transform:translate(-50%,-50%);
}
3.換一種思路
既然塊級(jí)元素可以通過margin:0 auto來實(shí)現(xiàn)水平居中娃胆，那可不可以使用margin:auto來實(shí)現(xiàn)水平垂直居中呢遍希？當(dāng)然可以，不過需要先做一些鋪墊里烦。
#parent1
{
height:200px;
width:200px;
background: yellow;
position: relative;
}
#child1
{
height: 100px;
width: 100px;
background: red;
position: absolute;
left: 0;
right:0;
top:0;
bottom:0;
margin:auto;
}
這種方案也是我經(jīng)常使用的凿蒜，它支持跨瀏覽器，包括IE8-IE10.無需其他特殊標(biāo)記胁黑，支持百分比%屬性值和min-/max-屬性废封，完美支持圖片居中。
4.不用絕對定位行不行丧蘸？強(qiáng)大的table
利用table本身的特性來實(shí)現(xiàn)水平垂直居中漂洋，總的說來這可能是最好的居中實(shí)現(xiàn)方法，因?yàn)閮?nèi)容塊高度會(huì)隨著實(shí)際內(nèi)容的高度變化，瀏覽器對此的兼容性也好刽漂。唯一的美中不足就是需要在父層和子層之間增加一個(gè)中間層演训。
#parent
{
height:200px;
width:200px;
background: yellow;
display: table;/*!!*/
}
#middle
{
display: table-cell;/*!!*/
vertical-align: middle;/*!!*/
}
#child
{
height: 100px;
width: 100px;
background: red;
margin: 0 auto;/*!!*/
}
5.說個(gè)簡單的——文字水平垂直居中
假如只有一個(gè)層，這個(gè)層的高度已知并且這個(gè)層中只有文字贝咙。那么可以讓文字的行高等于層的高度來實(shí)現(xiàn)垂直居中仇祭，利用text-align屬性實(shí)現(xiàn)水平居中。
div
{
width:200px;
height:200px;
background:yellow;
line-height:200px;
text-align:center;
}
6.未來的主流——Flexbox
對于flexbox來說颈畸，解決水平垂直居中簡直小菜一碟乌奇，它甚至可以用來解決更加復(fù)雜的布局問題。但是flexbox的兼容性不是很高眯娱，需要大量的hack代碼礁苗，而且不支持IE8/IE9。
#parent
{
width:200px;
height:200px;
background: yellow;
display: -webkit-box; /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本語法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本語法: IE 10 */
display: -webkit-flex; /* 新版本語法： Chrome 21+ */
display: flex; /* 新版本語法： Opera 12.1, Firefox 22+ */
/*垂直居中*/
/*老版本語法*/
-webkit-box-align: center;
-moz-box-align: center;
/*混合版本語法*/
-ms-flex-align: center;
/*新版本語法*/
-webkit-align-items: center;
align-items: center;
/*水平居中*/
/*老版本語法*/
-webkit-box-pack: center;
-moz-box-pack: center;
/*混合版本語法*/
-ms-flex-pack: center;
/*新版本語法*/
-webkit-justify-content: center;
justify-content: center;
}
#child
{
width:100px;
height:100px;
background: red;
}
7.多個(gè)塊級(jí)元素的居中
將子層（塊級(jí)）設(shè)置為inline-block徙缴，高度和父層一致试伙。可以自適應(yīng)于样。
#parent
{
width:500px;
height:100px;
background: yellow;
text-align: center;
}
#child1,#child2,#child3
{
width:100px;
height:100px;
background: red;
display:inline-block;
}
