水平居中

1. 如果是行内元素，要实现水平居中只需要将父元素设置为text-align=center
2. 如果是固定宽度的块状元素，设置该元素本身为margin: 0 auto
3. css3的新属性font-content，自动将元素宽度缩小到内容的宽度，然后使用margin：0 auto可以轻松的实现水平居中(目前只支持chrome和FireFox)

.son{ width: -moz-fit-content; width: -webkit-fit-content; width:fit-content; margin:0 auto; }

　　 4.绝对定位以及margin-left的负值实现水平居中

　　　　

.son {            position: absolute;            width: 50px;            left: 50%;            margin-left: -25px;（宽度的一半）            background-color: blue;            text-align: center;        }

　　 5.绝对定位left right同时设置为0 同时设置margin：0 auto

.son{            position: absolute;            width: 50px;            left: 0;            right: 0;            background-color: blue;            margin: 0 auto;            height: 100%;        }

垂直居中

1. 若元素为单行文本，直接设置其text-align为父元素的高度
2. 利用position以及top bottom属性

 

.son{    position:absolute;    height:固定;    top:0;    bottom:0;    margin:auto 0;}

 

　　3.利用margin的负值

.son{    position:absolute;    top:50%;    height:固定;    margin-top:-0.5高度;}

　　4.利用vertical-align

.parent::after, .son{    display:inline-block;    vertical-align:middle;}.parent::after{    content:'';    height:100%;}