首页 > 代码库 > 元素自动居中显示
元素自动居中显示
我们在写页面时经常会遇到让一个元素自动居中显示的需求，这个元素有可能是块级元素，有可能是行内元素，也可能是文字等等，而居中的需求有可能是水平居中，垂直居中或者两者同时居中。
据我目前了解，居中有四种方式：1. 利用table表格特性； 2. 使用table-cell属性以table方式渲染； 3. margin自动居中； 4. 使用absolute配合margin负值居中；以下逐个讲解：
1. 利用table表格特性
这种方式可以让内容垂直居中（valign="middle"）和水平居中（align="center"），无论是行内元素还是块级元素都可以垂直居中（inline，inline-block，block），但是水平居中只支持带有行内属性的元素（inline，inline-block），图示如下：
示例：
css：
td {
width: 300px;
height: 150px;
border: 1px solid #d9d9d9;
}
td p {
width: 150px;
height: 75px;
background: #e5e5e5;
}
html：
<table>
<tr>
<td valign="middle" align="center">
<p></p>
</td>
</tr>
</table>
2. 使用table-cell属性以table方式渲染
这种方式使得元素表现的像td或th一样。图示如下：
示例：
css：
#table {
width: 300px;
height: 150px;
display: table-cell;
vertical-align: middle;
text-align: center;
border: 1px solid #d9d9d9;
}
#table p {
width: 150px;
height: 75px;
display: inline-block;
background: #e5e5e5;
}
html：
<div id="table">
<p></p>
</div>
3. margin自动居中
这种方式会自动计算，但是只支持水平居中，不支持垂直居中，所以一般都会设置margin: o auto;图示如下：
示例：
css：
#mg {
width: 535px;
height: 185px;
border: 1px solid #d9d9d9;
}
#mg p {
width: 190px;
height: 100px;
background: #e6e6e6;
margin: 0 auto;
}
html：
<div id="mg">
<p></p>
</div>
4. 使用absolute配合margin负值居中
这种方式利用了百分比及精确计算，支持水平居中和垂直居中。这个需要讲解下，我们前面讲过绝对定位（关于position定位及z-index的理解），它是脱离文档流的，所以，如果你是针对浏览器居中，父元素不用另外设属性，否则的话，父元素要设置relative或者absolute。我们要想让一个元素居中显示（暂以水平居中为例，垂直原理相同），需要将它的中线（灰色虚线）与父元素的中线（蓝色虚线）重合，当我们让一个元素绝对定位，并且left值设置50%的时候，这个元素的最左边就会始终与父元素的中线（蓝色虚线）对齐，我们要做的就是让它在这个基础上向左再移回去一部分，这一部分是多少呢？从图上可以看出，父元素的中线（蓝色虚线）与灰色方块最左边对齐，两个中线之间的距离刚好是灰色区域宽度的一半。所以我们可以利用margin可以取负值的特性，让margin-left向左移动灰色区域宽度的一半，就可以居中显示了。垂直同理。图示如下：
示例：
css：
#pa {
width: 535px;
height: 185px;
border: 1px solid #d9d9d9;
position: relative;
}
#pa p {
width: 190px;
height: 100px;
background: #e6e6e6;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -95px;
}
html：
<div id="pa">
<p></p>
</div>
元素自动居中显示