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


定義限制條件:

  1. 讓子元素水平、垂直皆居中:

  2. 置中的設定不能寫死特定的偏移值
     (當父/子元素的寬高有變化時仍要維持居中)

    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 (opens new window)

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

# 寫法2:Flex + Margin auto

.container{
    display: flex;
    .box{
        margin: auto
    }
}

> Codepen Demo (opens new window)

  • 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 (opens new window)

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

# 寫法4:Absolute + LT 50% +Translate -50%

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

> Codepen Demo (opens new window)

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

# 寫法5:Relative + LT 50% +Translate -50%

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

> Codepen Demo (opens new window)

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

# 寫法6:偽元素 + 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 (opens new window)


# 參考文件


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