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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33485463/article/details/79496917

在工作过程中一直碰到关于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;
}