1、一、水平居中（text-align：center;）这个属性在没有浮动的情况下，我们可以将块级元素转换为inline/inline-block，然后其父元素加上text-align:center;属性就可以将其居中。如果是行内元素（比如span、img、a等）直接在父元素上添加text-align:center;属性即可。
2、二、使用margin:0 auto;水平居中前提：给元素设定了宽度和具有display：block；的块级元素。让一个DIV水平居中，只要设置了DIV的宽度，然后使用margin：0 auto，css自动算出左右边距，使得DIV居中。
3、三、定位实现居中(需塥骈橄摆计算偏移值)原理: 通过定位使元素左上角居中，再通过偏移值margin调整使元素中心居中。缺点：高度宽度需事先知道。<div class=媪青怍牙"absolute_p1"> <div class="absolute_c1"></div></div>.absolute_p1 { position: relative; width: 200px; height: 200px;}.absolute_p1 .absolute_c1 { width: 100px; height: 100px; position: absolute; /* fixed 同理 */ left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; /* 需根据宽高计算偏移量 */}该方法普遍使用，但是前提必须知道元素的宽度和高度。如果当页面的宽高是动态的，比方说页面需要弹出一个DIV层必须要居中显示，DIV的内容是动态的，所以宽高也是动态的，这是可以用jquery解决居中。
5、五、 定位殂翼瑟擀实现居中(不需计算偏移值，margin：auto；和定位搭配使用)这种方法好处是行内元素和块级元素都适用,但是需要知道元素本身的宽度。<div class="parent"> <span class="child">margin:auto;和定位使用</span> </div> .parent{ border: 1px solid #002FFF; width: 400px; height: 400px; position: relative; } .child{ width: 200px; height: 120px; background: #ddd; text-align: center; line-height: 120px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
7、七、使用css3的新属性transform:translate(x,y)属性这个方法可以不需要设定固定的宽高，在移动端用的会比较多，在移动端css3兼容的比较好原理: 通过定位使元素左上角居中，再通过 translate 位移元素使之中心居中，由于 translate支持百分比，所以也就不用自己算偏移量了
