前端面試之居中佈局

水平居中

行內元素水平居中

方法: 給行內元素父元素使用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>
複製程式碼