我们在写页面时经常会遇到让一个元素自动居中显示的需求，这个元素有可能是块级元素，有可能是行内元素，也可能是文字等等，而居中的需求有可能是水平居中，垂直居中或者两者同时居中。
据我目前了解，居中有四种方式：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负值居中
这种方式利用了百分比及精确计算，支持水平居中和垂直居中。这个需要讲解下，我们前面讲过绝对定位（）， 它是脱离文档流的，所以，如果你是针对浏览器居中，父元素不用另外设属性，否则的话，父元素要设置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>