行內(nèi)元素
文字等行內(nèi)元素直接利用text-align：center即可，圖片則需要先包裹在一個塊級元素中，隨后對塊級元素添加text-align：center才可。因為text-align是作用在塊級元素中的行內(nèi)元素上的。
塊級元素
確定寬度的塊級元素
通過給確定寬度的塊級元素設(shè)置margin-right: auto和margin-left: auto;來實現(xiàn)其水平居中
不確定寬度的塊級元素
方法一：
將需要水平居中的塊級元素包裹在<table>標(biāo)簽中的<td>中并設(shè)置為行內(nèi)元素高氮，通過給<table>設(shè)置margin-right: auto和margin-left: auto;來實現(xiàn)水平居中。缺點是代碼過于冗長顷牌。
<body>
<style>
div{display: inline;}
table{
margin-right: auto;
margin-left: auto;
}
</style>
<table>
<tr>
<td>
<div class="div2">2222222</div>
</td>
</tr>
</table>
</body>
不確定寬度.png
方法二：
將不確定寬度的塊級元素設(shè)為行內(nèi)元素剪芍，并包裹在一個塊級元素中，對該塊級元素設(shè)置text-align: center;即可窟蓝。
缺點是無法為不確定寬度的塊級元素設(shè)置寬高紊浩。
<body>
<style>
.div2{display: inline;}
.div1{
text-align: center;
}
</style>
<div class="div1">
<div class="div2">33333333</div>
</div>
</body>
方法二.png
方法三：
通過給父元素設(shè)置float: left；position: relative疗锐；left: 50%;，子元素設(shè)置position: relative费彼；left: -50%;來實現(xiàn)水平居中滑臊。
缺點是元素脫離文檔流。
<body>
<style>
.div1{
background-color:peru;
float: left;
position: relative;
left: 50%;
}
.div2{
position: relative;
left: -50%;
background-color: aquamarine;
}
</style>
<div class="div1">
<div class="div2">33333333</div>
</div>
</body>
方法三.png
