css水平垂直居中的12種方式

如何實現元素的水平垂直居中？這是一道常見面試題，本篇文章將就兩種情形解答這一問題

（1）居中元素固定尺寸

• absolute + 負margin
• absolute + margin auto
• absolute + calc

 

（2）居中元素不定尺寸

• absolute + transform
• flex + justify-content + align-items
• flex + margin auto
• grid
• 行內塊元素 + line-height
• 行內塊元素 + 輔助元素
• 行內塊元素 + css-table
• 行內塊元素 + table
• 行內塊元素 + writing-mode

   

一. 固定尺寸

1. absolute + 負margin

.container {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 250px;
    margin-top: -125px;  /* 設置為高度的一半 */
    margin-left: -125px; /* 設置為寬度的一半 */
    background-color: lightblue;
}

<div class="container">
    <div class="box"></div>
</div>

 

效果圖：

 

2. absolute + margin auto

.container {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
}
.box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 250px;
    height: 250px;
    margin: auto;
    background-color: lightblue;
}

<div class="container">
    <div class="box"></div>
</div>

 

效果圖：

 

3. absolute + calc

.container {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
}
.box {
    position: absolute;
    top: calc(50% - 125px);
    left: calc(50% - 125px);
    width: 250px;
    height: 250px;
    background-color: lightblue;
}

<div class="container">
    <div class="box"></div>
</div>

 

效果圖：

 

二. 非固定尺寸

1. position + absolute (依賴 translate 2d 的兼容性)

.father {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: lightblue;
}

<div class="father">
    <div class="box">
        <img
             style="width: 300px; height: 200px;"
             src="https://tenfei02.cfp.cn/creative/vcg/800/new/VCG211314245608.jpg"
        >
    </div>
</div>

 

效果圖：

 

2. flex + justify-content + align-items

.father {
    display: flex;
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
    justify-content: center;
    align-items: center;
}

<div class="father">
    <div class="box">
        <img
             style="width: 300px; height: 200px;"
             src="https://tenfei02.cfp.cn/creative/vcg/800/new/VCG211314245608.jpg"
        >
    </div>
</div>

 

效果圖：

 

3. flex + margin auto

.father {
    display: flex;
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
}
.box {
    margin: auto;
}

<div class="father">
    <div class="box">
        <img
             style="width: 300px; height: 200px;"
             src="https://tenfei02.cfp.cn/creative/vcg/800/new/VCG211314245608.jpg"
        >
    </div>
</div>

 

效果圖：

 

4. grid （兼容性差，不推薦使用）

.father {
    display: grid;
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
}
.box {
    justify-self: center;
    align-self: center;
}

<div class="father">
    <div class="box">
        <img
             style="width: 300px; height: 200px;"
             src="https://tenfei02.cfp.cn/creative/vcg/800/new/VCG211314245608.jpg"
        >
    </div>
</div>

 

效果圖：

 

5. 行內塊元素 + line-height （元素內容為文字時生效）

.father {
    width: 500px;
    height: 500px;
    line-height: 500px;
    border: 1px solid #465468;
    text-align: center;
}
.box {
    display: inline-block;
    vertical-align: middle;
    line-height: inherit;
}

<div class="father">
    <div class="box">
        不定尺寸
    </div>
</div>

 

效果圖：

 

6. 行內塊元素 + 輔助元素

.father {
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
    text-align: center;
    font-size: 0px;
}
.box {
    display: inline-block;
    vertical-align: middle;
}
/* 輔助元素 */
.father::after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

<div class="father">
    <div class="box">
        <img
             style="width: 300px; height: 200px;"
             src="https://tenfei02.cfp.cn/creative/vcg/800/new/VCG211314245608.jpg"
        >
    </div>
</div>

 

效果圖：

 

7. 行內塊元素 + css-table

.father {
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}

<div class="father">
    <div class="box">
        <img
             style="width: 300px; height: 200px;"
             src="https://tenfei02.cfp.cn/creative/vcg/800/new/VCG211314245608.jpg"
        >
    </div>
</div>

 

效果圖：

 

8. 行內塊元素 + table （代碼冗余，不推薦使用）

.father {
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
    text-align: center;
}
.box {
    display: inline-block;
}

<table>
    <tbody>
        <tr>
            <td class="father">
                <div class="box">
                    <img
                         style="width: 300px; height: 200px;"
                         src="https://tenfei02.cfp.cn/creative/vcg/800/new/VCG211314245608.jpg"
                    >
                </div>
            </td>
        </tr>
    </tbody>
</table>

 

效果圖：

 

9. 行內塊元素 + writing-mode

.father {
    width: 500px;
    height: 500px;
    border: 1px solid #465468;
    text-align: center;
    writing-mode: vertical-lr;
    text-align: center;
}
.inner {
    display: inline-block;
    width: 100%;
    writing-mode: horizontal-tb;
    text-align: center;
}
.box {
    display: inline-block;
    margin: auto;
}

<div class="father">
    <div class="inner">
        <div class="box">
            <img
                 style="width: 300px; height: 200px;"
                 src="https://tenfei02.cfp.cn/creative/vcg/800/new/VCG211314245608.jpg"
                 >
        </div>
    </div>
</div>

 

效果圖：

 

總結

• PC端有兼容性要求，寬高固定，推薦absolute + 負margin
• PC端有兼容要求，寬高不固定，推薦css-table
• PC端無兼容性要求，推薦flex
• 移動端推薦使用flex