1.margin:0 auto水平居中

具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。

2.text-align:center水平居中

只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个浏览器中，它是能对任何元素进行水平居中的。

3.height和line-height让单行文字垂直居中

把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。

4.display:table-cell

对于那些不是表格的元素，我们可以通过display:table-cell来把它模拟成一个表格单元格，这样就可以利用表格的那些很方便的居中特性了（这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效）。例如：

<div style="display:table-cell;vertical-align:middle;width:100px;height:100px;background:#039">
    <p style="background:#f00;line-height:1">不管高度多少，始终垂直居中</p>
</div>

一个遮罩弹窗中的内容垂直水平居中示例如下（重点是父容器display:table和子容器的display:table-cell;vertical-align:middle）

<div style="display:table;position:fixed;top:0;left:0;z-index:99;width:100%;height:100%;background:rgba(0,0,0,.5)">
    <div style="display:table-cell;vertical-align:middle">
        <div style="margin:0 auto;width:20%;padding:10px;background:#fff;">
        	<p>不管高度如何，却可以始终垂直和水平居中</p>
        </div>
    </div>
</div>

5.使用绝对定位来进行居中

使用绝对定位来进行居中的这两种方法都只适用于已知宽度或高度的元素。

方法一：通过把这个绝对定位元素的left或top的属性设为50%，这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。

如果只想实现一个方向的居中，则可以只使用left,margin-left来实现水平居中，使用top,margin-top来实现垂直居中。

<div style="position:relative;width:100px;height:100px;background:#039">
	<div style="position:absolute;left:50%;top:50%;margin:-25px 0 0 -25px;width:50px;height:50px;background:#f00">
	</div>
</div>

方法二：此法只支持IE9+,谷歌，火狐等符合w3c标准的现代浏览器。这里如果不定义元素的宽和高的话，那么他的宽就会由left,right的值来决定，高会由top,bottom的值来决定，所以必须要设置元素的高和宽。同时如果改变left,right,top,bottom的值还能让元素向某个方向偏移。

<div style="position:relative;width:100px;height:100px;background:#039">
	<div style="position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:50px;height:50px;background:#f00">
	</div>
</div>

相关资料

CSS布局奇淫技巧之--各种居中