网页中元素居中的需求很普遍，今天就要谈谈相对比较简单，使用场合更多的水平居中。
行级元素居中
我们知道css中有一个text-align的属性来定义子元素的水平对齐，不过它仅对行级元素生效。一种思路就是我们将想要居中的元素规定成inline或inline-block元素。
.parent{
text-align: center;
width:100%;
}
.child{
display: inline-block;
width:200px;
}
<div class="parent"> <div class="child">我要居中</div> </div>
注意，inline-block在低版本IE和firefox中支持不佳，为了兼容低版本IE，我们需要给所有的inline-block元素加上一段hack：
display: -moz-inline-stack;
display:inline-block;
*zoom:1;
_zoom:1;
*display:inline;
_display:inline;
margin自适应居中
inline-block是一把双刃剑，虽然常常可以解决一些布局的难题，但兼容性问题很大。一方面建议开发者把上面我给出的hack代码放在css一个class中，如果在页面中要用到inline-block，则给这个元素加上这个class。不过不想用inline-block的话，还是有别的方法的，比如很多前端朋友都会用到的margin自适应居中。这是我见过最简单的方法，只需要给子元素设置左右margin为auto即可。原理很简单，当一个块级元素的左右margin为auto时，浏览器根据父元素和子元素的宽度计算出一个使其居中的左右margin。
.parent{
width:100%;
}
.child{
margin: 0 auto;
width:200px;
}
<div class="parent"> <div class="child">我要居中</div> </div>
注意，这个方法虽然很简单，但由于行级元素对margin不敏感，因而此方法仅能用于块元素，即inline，inline-block，甚至inline-table的元素无法用此方法实现水平居中。
绝对定位
绝对定位也许是处理布局问题最有效的手段，当往往给人一种“暴力”的感觉。简单粗暴但高效的方法在编程时永远是最有价值的。那么绝对定位是如何做到水平居中的呢？我们知道，要对一个元素进行绝对定位，我们常常会规定它相对于relative元素的top、left、right、bottom中的一个或几个。很容易地，我们能想出，要让它能居中，我们可以设定 left = ( W - w ) / 2 = W * 50% - w * 50% ,其中W为relative元素（如父元素）的宽，w为居中元素的宽。不过有一个问题：css中并不能进行这样的数值计算。不过这个问题有解，我们可以借助负margin值来解决这个问题，我们可以先设定 left:50% ，这时候元素是偏向右的，我们还需要让它左移自己宽度的一半。假设自身宽度为200px，那么我们可以规定：margin-left:-100px ，请特别注意这里的负号！
.parent{
width:100%;
position:relative;
}
.child{
position:absolute;
left:50%
margin-left:-100px;
width:200px;
}
<div class="parent"> <div class="child">我要居中</div> </div>
想必大家从我之前的说明里已经能看到这个方法的一点弊端了。对！这个方法要求我们必须先知道元素的宽度。对于动态的元素，如果我们无法事先得知元素的宽度，那么纯CSS无法解决这个问题，只能借助javascript获取宽度值后再更改margin-left的属性值。
表格布局
在css兴起之前，表格布局大行其道。我记得我初中时刚接触网页制作，老师讲课也好，参考资料也好，均是表格布局的例子。不过表格布局的页面可读性实在很差，可维护性和可扩展性都很低。不过不得不说，用表格布局确能有效解决好多复杂的布局问题。对于表格布局，我的态度是：反对页面整体使用表格布局，但在局部，可以使用表格布局，不过要求表格结构完整，不允许表格嵌套。
回到正题，如果仅仅是解决水平居中的问题，采用表格布局，我们完全可以不用使用css,我们只要给包含要居中内容的单元格添加属性 align="center" 即可。
.child{
width:200px;
}
<td class="parent"> <div class="child">我要居中</div> </td>
|
我要居中
|
