CSS水平和垂直居中在開發(fā)中經(jīng)常用到茂蚓，在此加以總結(jié)。
水平居中方法
1.行內(nèi)元素水平居中担扑，設(shè)置父元素的text-align: center。
<div id="box" >
<span id="content" >center</span>
</div>
#box {
text-align: center;
}
常用的行內(nèi)元素有
a趣钱、abbr涌献、b、br首有、em燕垃、input、label井联、select利术、span、strong低矮、sub、sup被冒、textarea等军掂。
2.寬度固定的塊級元素水平居中轮蜕，設(shè)置該元素的margin: 0 auto。
<div id="box" >
<div id="content" >center</div>
</div>
#box {
width: 64%;
margin: 0 auto;
}
常用的塊級元素有
address蝗锥、article跃洛、audio、blockquote终议、canvas汇竭、div、footer穴张、form细燎、h1、header皂甘、hr玻驻、ol、output偿枕、p璧瞬、pre、section渐夸、table嗤锉、ul、video等墓塌。
3.絕對定位元素水平居中瘟忱，設(shè)置父元素position: relative，設(shè)置該元素left: 0; right: 0; margin: 0 auto;桃纯。
<div id="box" >
<div id="content" >center</div>
</div>
#box {
position: relative;
}
#content {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
4.flex布局水平居中酷誓，設(shè)置父元素display: flex; justify-content: center。
<div id="box" >
<div id="content" >center</div>
</div>
#box {
display: flex;
justify-content: center;
}
垂直居中方法
1.單行文本垂直居中态坦，設(shè)置該元素line-height為父元素height高度盐数。
<div id="box" >
<div id="content" >center</div>
</div>
#content {
height: 2em;
line-height: 2em;
}
2.將父元素顯示為表格display: table-cell，利用vertical-align: middle設(shè)置垂直居中伞梯。
<div id="box" >
<div id="content" >center</div>
</div>
#box {
display: table-cell;
vertical-align: middle;
}
3.絕對定位該元素并設(shè)置父元素positoin: relative玫氢，設(shè)置該元素top:0; bottom: 0; margin: auto;
<div id="box" >
<div id="content" >center</div>
</div>
#box {
position: relative;
}
#content {
position: absolute;
top: 0;
bottom: 0;
marigin: auto;
}
4.絕對定位固定高度是，設(shè)置top: 50%谜诫，margin-top值為高度值的一半漾峡。
<div id="box" >
<div id="content" >center</div>
</div>
#box {
position: relative;
}
#content {
position: absolute;
height: 12em;
top: 50%;
margin-top: 6em;
}
5.flex布局，設(shè)置父元素display: flex; align-items: center
<div id="box" >
<div id="content" >center</div>
</div>
#box {
display: flex;
align-items: center;
}
