如果文章對你有幫助渴肉，請點喜歡并關(guān)注幽七，這將是我最大的動力竟闪，謝謝
1.水平居中
1.1.文字离福，圖片以及內(nèi)聯(lián)元素：
如果希望居中的是內(nèi)聯(lián)元素或者是文字圖片
text-align:center;
1.2.塊狀元素
1.2.1.對于已設(shè)置寬度的塊狀元素：
margin:0 auto;----------------------讓margin的左右自適應(yīng)，通常是居中
1.2.2.對于未設(shè)置寬度的塊狀元素：
1.使用table標簽
html：
<table>
<tr>
<td>
<div id="container"></div>
</td>
</tr>
</table>
css:
table{
margin:0 auto;
}
這個不常用炼蛤，因為添加了更多無意義的標簽
2.通過將子塊狀元素變成行內(nèi)元素
html:
<div>
<p>居中示例</p>
</div>
css:
p{
display:inline;
}
div{
text-align:center;
}
假設(shè)p在div內(nèi)部妖爷，要讓p居中
先給外層元素設(shè)置text-align:center，這個意思是讓div里面的內(nèi)聯(lián)元素居中理朋，然后將p變成內(nèi)聯(lián)元素絮识，即可。
3.通過position
html:
<div>
<p>居中示例</p>
</div>
css:
div{
float:left;
position:relative;
left:50%;
}
p{
position:relative;
right:50%;
}
float:left暗挑，目的是讓父元素靠左并且寬度與子元素等寬笋除；然后相對于原先的位置，向右移動50%炸裆，此時該元素的left為50%+（50%父元素自身寬度）
然后將子元素相對于原先的位置垃它，向左移動50%（這50%是基于父元素的寬度），此時居中烹看。
2.垂直居中
2.1.對于已設(shè)置高度的單行文本
只需將父元素的height值與line-height的值設(shè)置相同即可
2.2.對于已設(shè)置高度的多行文本
1.使用table標簽
html:
<table>
<tr>
<td>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
</td>
</tr>
</table>
css:
table{
height: 500px;
background-color: #aaa;
}
因為table標簽中的td擁有標簽隱式的樣式：vertical-align:middle;
2.通過table-cell
html:
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
css:
p{
display:table-cell;
vertical-align:middle;
}
table-cell的意思是讓元素以表格單元的形似表現(xiàn)国拇，但是只支持IE8以上瀏覽器?
