CSS 元素置中的 N 個方法

元素置中是調控 CSS 時必然會遇到的問題，也是 Junior 前端工程師面試的熱門考題。這篇列出常見的置中方式。

定義限制條件：

讓子元素水平、垂直皆居中：
置中的設定不能寫死特定的偏移值
(當父／子元素的寬高有變化時仍要維持居中)
ps. 下列範例以兩個 div -- 父（.container)、子(.box)結構為例：


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

寫法1：Flex 標配置中屬性

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

> Codepen Demo

將父層設為 display： flex
定義 Flex 子物件
- justify-content：center 主軸對齊方式：居中
- align-items:center 次軸對齊方式：居中

寫法２：Flex + Margin auto

.container {
    display: flex;

    .box {
        margin: auto
    }
}

> Codepen Demo

margin: auto：將剩餘空間自動分配
display 設為 grid / inline-flex / inline-grid 定義完整空間。

寫法3：Absolute + TRBL 0 + Margin auto

.container {
    position: relative;

    .box {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
}

> Codepen Demo

position: absolute 指定 top / right / bottom / left 時是以「第一個有定位的父層容器」為位移基準。
有定位是指 position 為 relative / absolute / fixed
- 若想指定依據的父層沒有特別定義 position 時，可定義為 relative 而不影響本來的排版（因為 relative 在未指定 top / right / bottom / left 時不會有任何改變）。
- 如果所有父層都沒有定位，則將對齊「window 視窗」
將 top / right / bottom / left 指定為 0 時，會自動計算為可運用的空間。
margin: auto：將剩餘空間做自動分配

寫法４：Absolute + LT 50% +Translate -50%

.container {
    position: relative;

    .box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

> Codepen Demo

類似方法 3
position: absolute 依據其「有定位的父層」做位移。
top: 50%、left: 50% 進行向下、右位移 50%：
但因物件對齊點為左上角，故須進行 X、Y 軸負向偏移 50% 讓對齊點為物件中心：transform: translate(-50%,-50%) 才可真正置中。

寫法５：Relative + LT 50% +Translate -50%

.container {

    .box {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }
}

> Codepen Demo

類似做法4。
position: relative 指定 top / right / bottom / left 時為原本位置做偏移。

寫法６：偽元素 + inline-block + vertical-align + text-align

.container {
    text-align: center;
    font-size: 0;

    &:after {
        content: '';
        height: 100%;
        vertical-align: middle;
        display: inline-block;
        width: 0px;
    }
    
    .box {
        display: inline-block;
        vertical-align: middle;
    }
}

> Codepen Demo

參考文件

⮩ 本文同步發表在第 12 屆 iT 邦幫忙鐵人賽《For 前端小幼苗的圖解筆記》