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”,则仅垂直居中；

算法：

当遇到多个选择符同时出现时候
按选择符得到的Specificity值逐位相加，
{数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}
就得到最终计算得的specificity，
然后在比较取舍时按照从左到右的顺序逐位比较。

实例分析：

1.div { font-size:12px;}
分析：
1个元素{ div}，Specificity值为0,0,0,1

2.body div p{color: green;}
分析：
3个元素{ body div p }，Specificity值为0,0,0,3

3.div .sjweb{ font-size:12px;}
分析：
1个元素{ div }，Specificity值为0,0,0,1
1个类选择符{.sjweb}，Specificity值为0,0,1, 0
最终：Specificity值为 0,0,1,1

4.Div # sjweb { font-size:12px;}
分析：
1个元素{ div }，Specificity值为0,0,0,1
1个类选择符{.sjweb}，Specificity值为0,1,0, 0
最终：Specificity值为 0,1,0,1

5.html > body div [id=”totals”] ul li > p {color:red;}
分析：
6个元素{ html body div ul li p} Specificity值为0,0,0,6
1个属性选择符{ [id=”totals”] } Specificity值为0,0,1,0
2个其他选择符{ > > } Specificity值为0,0,0,0
最终：Specificity值为 0,0,1,6