常用居中方法记录

1.相对定位

（1）在父元素中使用text-align:center;

（2）使用margin:auto;

（3）通过设置left，top偏移量和负边距实现居中

　　　width:[width]; height:[height];

　　　　position:absolute;

　　　　left:50% top:50px;

　　　　margin-left:-[width];

　　　　margin-top:-[height];

（4）通过偏移和css位移实现（css3版）

　　position: absolute; left: 50%; top: 50%;
　　transform: translate(-50%, -50%);

 

（5）绝对定位通过设置四个偏移量和外边距自动实现居中（水平+垂直）

　　width:[width]; height:[height];

　　position: absolute;

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

（6）不定宽居中

<div class="preant">
	<div class="child">
	<div class="child">
	<div class="child">
</div>

　　

/*清浮动*/
.preant::after{
    content:" ";
    display:block;
    height:0px;
    clear:both;
}
/*不定宽居中*/
.preant{
    position:relative;
    display: table;
    margin: 0 auto;
}
.child{
    width:X;
    height:X;
    float:left;
}