关于css布局（水平垂直居中）

在工作过程中一直碰到关于css布局的问题，其实除了margin:0 auto之外，还有一些很灵活的方法

水平居中

1）使用inline-block+text-align，先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。对子框设置display:inline-block，对父框设置text-align:center。<div class="parent">
<div class="child>DEMO</div>
</div>
.child{
display:inline-block;
}
.parent{
text-align:center;
}2）使用absolute+transform  将子框设置为绝对定位，移动子框，使子框左侧距离相对框左侧边框的距离为相对框宽度的一半，再通过向左移动子框的一半宽度以达到水平居中。当然，在此之前，我们需要设置父框为相对定位，使父框成为子框的相对框。对父框设置position:relative，对子框设置position:absolute，left:50%，transform:translateX(-50%)<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
position:relative;
}
.child {
position:absolute;
left:50%;
transform:translateX(-50%);
}3）使用flex+justify-content     通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。先将父框设置为display:flex，再设置justify-content:center。<div class="parent">
<div class="child>DEMO</div>
</div>
.parent { display:flex; justify-content:center;}

垂直居中

1）使用absolute+transform    类似于水平居中时的absolute+transform原理。将子框设置为绝对定位，移动子框，使子框上边距离相对框上边边框的距离为相对框高度的一半，再通过向上移动子框的一半高度以达到垂直居中。当然，在此之前，我们需要设置父框为相对定位，使父框成为子框的相对框。先将父框设置为position:relative，再设置子框position:absolute，top:50%，transform:translateY(-50%)。<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
position:relative;
}
.child {
position:absolute;
top:50%;
transform:translateY(-50%);
}2）使用flex+align-items    通过设置CSS3中的布局利器flex中的属性align-times，使子框垂直居中。先将父框设置为display:flex，再设置align-items:center<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
position:flex;
align-items:center;
}

水平垂直居中

1）使用absolute+transform   将水平居中时的absolute+transform和垂直居中时的absolute+transform相结合

<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
position:relative;
}
.child {
position:absolute;
left:50%;
top:50%;
transform:tranplate(-50%,-50%);
}2）使用flex+justify-content+align-items     通过设置CSS3布局利器flex中的justify-content和align-items，从而达到水平垂直居中<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
display:flex;
justify-content:center;
align-items:center;
}