水平居中 和 垂直居中

水平居中

1. margin: 0 auto;
   只能进行水平的居中，且对浮动元素或绝对定位元素无效。
2. text-align:center;
   只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。
3. 浮动配合相对定位来进行水平居中
   浮动居中的原理是：把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度，这时就需要他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少。
   这种使用浮动配合相对定位来居中的方法，优点是不用知道要居中的元素的宽度，即使这个宽度是不断变化的也行；缺点是需要一个多余的元素来包裹要居中的元素。

垂直居中

1. line-height
   使用line-height让单行的文字垂直居中。

水平和垂直居中

1. display: table-cell;
   模拟成一个表格单元格，就可以利用表格的居中特性。
2. 绝对定位来进行居中（适用于已知宽度或高度的元素）
   绝对定位进行居中的原理是：通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。
   如果只想实现一个方向的居中，则可以只使用left , margin-left 来实现水平居中，使用top , margin-top来实现垂直居中。
3. 另一种使用绝对定位居中的方法（需已知宽度或高度的元素，而且只支持IE9+、谷歌、火狐等符合w3c标准的现代浏览器）

left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;