1、块状元素水平居中：
margin-left=auto；margin-right=auto；
2、浮动块状元素水平居中：
外包装块“float：left；position：relative；left：50%”；
内部块“float：left；position：relative；right：50%”
3、内容居中：
内联元素：text-align:center；vertical-align:middle
块状元素：
display:table-cell;vertical-align:middle;
若是单行内容：line-height=height
4、绝对定位元素垂直水平居中：
方法1：
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
但这种方法优点是兼容性较好，缺点是需要提前知道元素的尺寸，否则margin负值的调整无法精确。此时，往往要借助JS获得。
方法2：使用CSS3
CSS3的兴起，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，无需提前知道元素尺寸，其都是水平垂直居中显示的。但此方法兼容性不好。
.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 第一个50%为width的一半，第二个50%为height的一半 */
}
方法3：上下左右均0位置定位+“margin: auto”（推荐做法！）
.element {
width: 600px; height: 400px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 水平和垂直都居中 */
}
若只设置“margin-left:auto”+“margin-right:auto”,则仅水平居中；
若只设置“margin-top:auto”+“margin-bottom:auto”,则仅垂直居中；
