水準居中設定通常是對内聯元素和塊狀元素進行設定，其中塊狀元素又分為定寬塊狀元素以及不定寬塊狀元素。
内聯元素的水準居中設定
内聯元素的水準居中設定，是通過給其父元素設定 text-align: center 來實作的。示例如下：
HTML代碼
<body>
<div><span>水準居中顯示</span></div>
</body>
CSS代碼
<style type="text/css">
div {
/*為了使顯示效果明顯，設定了邊框和寬高*/
width: 200px;
height: 50px;
border: 1px solid red;
text-align: center;
}
span {
/*為了使顯示效果明顯，設定了邊框*/
border: 1px solid blueviolet;
}
</style>
效果如下：
定寬塊狀元素的水準居中設定
定寬塊狀元素通過設定 左右margin值為auto來實作水準居中。示例如下：
<body>
<div>
<p>定寬塊狀元素水準居中</p>
</div>
</body>
<style type="text/css">
div {
/*為了使顯示效果明顯，設定了父元素邊框，寬和高*/
width: 300px;
height: 50px;
border: 1px solid red;
}
p {
/*為了使顯示效果明顯，設定了邊框*/
border: 1px solid blue;
width: 160px;
margin: 10px auto;
}
</style>
不定寬塊狀元素設定水準居中方法一
利用table标簽的長度自适應性(table其長度根據其内文本長度決定)，可以将table看做一個定寬塊狀元素，然後再利用定寬塊狀元素水準居中的方法進行設定。示例如下：
<body>
<div>
<table>
<tbody>
<tr>
<td>
<p>内容1</p>
<p>内容2</p>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<style type="text/css">
div {
/*為了使顯示效果明顯，設定了父元素邊框，寬和高*/
width: 300px;
height: 120px;
border: 1px solid red;
}
table {
/*為了使顯示效果明顯，設定了邊框*/
border: 1px solid blue;
margin: 10px auto;
}
</style>
不定寬塊狀元素設定水準居中方法二
改變塊狀元素的display為inline類型(設定為内聯元素)，然後将其父元素設定 text-align: center 來實作水準居中。示例如下：
<body>
<div>
<p>内容01</p>
<p>内容02</p>
</div>
</body>
<style type="text/css">
div {
/*為了使顯示效果明顯，設定了父元素邊框，寬和高*/
width: 300px;
height: 120px;
border: 1px solid red;
text-align: center;
}
div p {
/*為了使顯示效果明顯，設定了邊框*/
border: 1px solid blue;
display: inline;
}
</style>
不定寬塊狀元素設定水準居中方法三
給父元素設定float，然後給父元素設定position: relative;left:50%; 子元素設定position:relative;left:-50%; 來實作水準居中。示例如下：
<body>
<div>
<p>内容</p>
</div>
</body>
<style type="text/css">
div {
float: left;
position: relative;
left: 50%;
}
div p {
position: relative;
left: -50%;
}
</style>
轉載文章請注明作者和出處，謝謝！