1.text-align:
text-align属性只能针对文本文字和img标签以及其他行内元素，对其他标签无效。
text-align:center；不同于html中的<center></center>属性，<center>是将所有被包含的元素都居中显示，而text-align：center只是将元素下面的内联元素居中显示。
2.居中
水平居中：
1.行内元素的水平居中，如果块级元素通过display:inline属性变为行内元素，也用此方法居中
方法：父类设置text-align:center;属性
1 <div style="height:auto;width:100%;background-color:#ccc;text-align:center"> 2 <div style="width:auto;height:200px;background:red;display:inline;">111 3 </div> 4 </div>
2.块级元素水平居中
1.宽度固定的块级元素水平居中：(即:width:X% || XXpx)
利用margin属性：margin:0 auto;关键是设置左右边距为auto，上下边距没有关系
1 <div style="height:auto;width:100%;background-color:#ccc;text-align:center"> 2 <div style="width:auto;height:200px;background:red;margin:0 auto;">111 3 </div> 4 </div>
2.宽度不固定的块级元素水平居中：（即没有对width进行设置）
1.利用<table></table>
把要居中的块级元素放在<td></td>中，用单元格对块级元素进行约束,然后设置margin属性
1 html代码： 2 <div> 3 <table> 4 <tbody> 5 <tr><td> 6 <ul> 7 <li><a href="#">1</a></li> 8 <li><a href="#">2</a></li> 9 <li><a href="#">3</a></li> 10 </ul> 11 </td></tr> 12 </tbody> 13 </table> 14 </div> 15 css代码： 16 <style> 17 table{ 18 margin:0 auto; 19 } 20 ul{list-style:none;margin:0;padding:0;} 21 li{float:left;display:inline;margin-right:8px;} 22 </style>
2.利用display属性，同上
3.利用定位，这个得好好的理解
1 方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。 2 代码如下： 3 <body> 4 <div class="container"> 5 <ul> 6 <li><a href="#">1</a></li> 7 <li><a href="#">2</a></li> 8 <li><a href="#">3</a></li> 9 </ul> 10 </div> 11 </body> 12 css代码： 13 <style> 14 .container{ 15 float:left; 16 position:relative; 17 left:50% 18 } 19 .container ul{ 20 list-style:none; 21 margin:0; 22 padding:0; 23 position:relative; 24 left:-50%; 25 } 26 .container li{float:left;display:inline;margin-right:8px;} 27 </style> 28 这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。 29 这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。
垂直居中：
1.单行元素垂直居中
利用line-height
1 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码： 2 <div class="container"> 3 hi,imooc! 4 </div> 5 css代码： 6 <style> 7 .container{ 8 height:100px; 9 line-height:100px; 10 background:#999; 11 } 12 </style>
2.多行文本垂直居中
1.还是利用表格对其进行约束，然后利用表格的vertical-align:middle;属性
1 父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种： 2 方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。 3 说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。下面看一下例子： 4 html代码： 5 <body> 6 <table><tbody><tr><td class="wrap"> 7 <div> 8 <p>看我是否可以居中。</p> 9 <p>看我是否可以居中。</p> 10 <p>看我是否可以居中。</p> 11 <p>看我是否可以居中。</p> 12 <p>看我是否可以居中。</p> 13 </div> 14 </td></tr></tbody></table> 15 </body> 16 css代码： 17 table td{height:500px;background:#ccc} 18 因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
2.还是利用vertical-align:middle属性，不过不是利用表格来实现了
1 在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。 2 html代码： 3 <div class="container"> 4 <div> 5 <p>看我是否可以居中。</p> 6 <p>看我是否可以居中。</p> 7 <p>看我是否可以居中。</p> 8 <p>看我是否可以居中。</p> 9 <p>看我是否可以居中。</p> 10 </div> 11 </div> 12 css代码： 13 <style> 14 .container{ 15 height:300px; 16 background:#ccc; 17 display:table-cell;/*IE8以上及Chrome、Firefox*/ 18 vertical-align:middle;/*IE8以上及Chrome、Firefox*/ 19 } 20 </style> 21 这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。
原文：http://www.cnblogs.com/zhengfengyun/p/5243465.html