前端面试之居中布局

水平居中

行内元素水平居中

方法: 给行内元素父元素使用text-align: center

<style>
* {
    margin: 0;
    padding: 0;
}

.box {
    border: 1px solid blue;
    height: 200px;
    text-align: center;
}
.box > span {
    background: pink;
}
</style>
<div class="box">
    <span>行内元素水平居中</span>
</div>
复制代码

块级元素水平居中

方法: 块级元素使用margin: 0 auto。

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        border: 1px solid blue;
        height: 200px;
    }
    .box > p {
        width: 200px;
        background: pink;
        margin: 0 auto;
    }
</style>
<div class="box">
    <p>块级元素水平居中</p>
</div>
复制代码

fit-content + margin: 0 auto

若子元素包含float,为了让子元素水平居中,可让父元素宽度设置为fit-content,并且配合margin。

<style>
* {
    margin: 0;
    padding: 0;
}

    .box {
        border: 1px solid blue;
        height: 200px;
        width: fit-content;
        margin: 0 auto;
    }
    .box > p {
        float: left;
        width: 300px;
        background: pink;
    }
</style>
<div class="box">
    <p>块级元素水平居中: 子元素浮动</p>
</div>
复制代码

关于fit-content推荐阅读理解CSS3 max/min-content及fit-content等width值

flex + justify-content: center

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        display: flex;
        justify-content: center;
        border: 1px solid blue;
        height: 200px;
    }
    .box > p {
        width: 300px;
        background: pink;
    }
</style>
 <div class="box">
    <p>flex + justify-content: center</p>
</div>
复制代码

absolute + transform

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        border: 1px solid blue;
        height: 200px;
    }
    .box > p {
        position: absolute;
        left: 50%;
        background: pink;
        transform: translate(-50%, 0);
    }
</style>
 <div class="box">
    <p>宽度未知: absolute + transform</p>
</div>
复制代码

关于transform使用推荐阅读理解SVG transform坐标变换

已知宽度: absolute + 负值的margin-left

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        border: 1px solid blue;
        height: 200px;
    }
    .box > p {
        position: absolute;
        left: 50%;
        width: 300px;
        background: pink;
        margin-left: -150px; /*-0.5width*/
    }
</style>
<div class="box">
    <p>宽度已知: absolute + 负值的margin-left</p>
</div>
复制代码

宽度已知: absolute + left:0;right:0;margin:0 auto

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        border: 1px solid blue;
        height: 200px;
    }
    .box > p {
        position: absolute;
        left: 0;
        right: 0;
        width: 300px;
        background: pink;
        margin: 0 auto;
    }
</style>
<div class="box">
    <p>宽度已知: absolute + left:0;right:0;margin:0 auto</p>
</div>
复制代码

垂直居中

已知父元素高度情况: line-height: height

若元素是单行文本, 则可设置 line-height 等于父元素高度。

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        border: 1px solid blue;
        height: 200px;
    }
    .box > p {
        background: pink;
        line-height: 200px;
    }
</style>
 <div class="box">
    <p>已知父元素高度情况: line-height: height</p>
</div>
复制代码

已经父元素高度: 若元素是行内块级元素如img, 可以使用display: inline-block, vertical-align: middle和一个伪元素。

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        border: 1px solid blue;
        height: 200px;
    }
    .box::after {
        content: '';
        height: 100%;
    }
    .box > img, .box::after {
        display: inline-block;
        vertical-align: middle;
        width: 100px;
    }
</style>
<div class="box">
    <img src="./mm.png" alt="">
</div>
复制代码

flex + align-items: center

absolute + transform

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        position: relative;
        height: 200px;
        border: 1px solid blue;
    }
    .box > p {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        background: pink;
    }
</style>
 <div class="box">
    <p>absolute + transform</p>
</div>
复制代码

display: table

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        display: table;
        width: 100%;
        height: 200px;
        border: 1px solid blue;
    }
    .box > p {
        display: table-cell; /* 类似于表格中的单元格, 此时vertical-align: middle才生效 */
        vertical-align: middle;
    }
</style>
<div class="box">
    <p>flex</p>
</div>
复制代码

水平垂直居中

absolute + transform

 <style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        position: relative;
        height: 200px;
        border: 1px solid blue;
    }
    .box > p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: pink;
    }
</style>
<div class="box">
    <p>absolute + transform</p>
</div>
复制代码

flex

table水平垂直居中

方法: inline-block + text-align + table-cell + vertical-align

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        display: table-cell;
        width: 100vw;
        height: 200px;
        border: 1px solid blue;
        text-align: center; /*水平居中*/
        vertical-align: middle; /*垂直居中*/
    }
    .box > span {
    }
    .box > p {
        width: 100px;
        display: inline-block; /* 防止块级元素宽度独占一行，内联元素可不设置 */
    }
</style>
<div class="box">
    <p>块级元素: table水平垂直居中</p>
</div>
<div class="box">
    <span>行内元素: table水平垂直居中</span>
</div>
复制代码

知道父元素高度,子元素高度

方法: 绝对定位方式+四个方向置0 + margin: auto

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        position: relative;
        height: 300px;
        border: 1px solid blue;
    }
    .box > p {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100px;
        height: 100px;
    }
</style>
 <div class="box">
    <p>绝对定位方式+四个方向置0</p>
</div>
复制代码