标签：
居中分水平和垂直两种，使用的频度也算是很高，下面分情况来讨论一下几种常用的实现方式。
欢迎指正文中的错误，同时如果有学习到新的方式也会更新在后面，也方便以后温故知新。
这种方式只能实现固定宽度的块级元素水平居中，如果该元素没有设置宽度或者不是块级元素，则不会生效。
/*以div元素为例*/ div{ width: 100px; height: 100px; margin: auto; /*或者margin: 0 auto;*/ }
将单行文字line-height值设置为其父元素高度可以实现该行文字的垂直居中，局限也很明显。
<div id=‘container‘> <p id=‘content‘>文字内容</p> </div>
#container{ height: 30px; } #content{ line-height: 30px; }
如果你使用表格的话，那么可以利用td元素的align:center和valign:middle属性轻易的做到水平和垂直居中，但是考虑到现在表格布局的使用频率已经很低了，实用性其实并不强。
<table> <tr> <td width=‘200px‘ height=‘200px‘ align=‘center‘ valign=‘middle‘> <!-- 子元素 --> </td> </tr> </table>
由于单元格可以轻易的实现水平和垂直居中，所以可以把父元素容器模拟成单元格元素，通过样式text-align:center以及vertical-align:middle来达到一样的效果。但是要注意的是text-align:center只能使非块级子元素水平居中而对块级子元素无效。
<div id="table-cel"> <div></div> </div>
#table{ display: table-cell; width: 200px; height: 200px; vertical-align: middle; text-align: center; }
这个方法使用的相对也较多，但是需要子元素有固定的宽高，不多说直接上代码。
<body> <div></div> </body>
html, body{ width: 100%; height: 100%; } body{ position: relative; } body>div{ position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; /*此时的元素并不是居中的，向右偏了一半的宽度，向下偏了一半的高度*/ /*所以要使用margin把元素拉回来*/ margin: -50px 0 0 -50px; }
标签：
原文地址：http://www.cnblogs.com/fxxkhigh/p/5408999.html
