CSS 元素置中大全

這邊共提供5個常見的方法，讓元素 水平，垂直皆置中。
下面範例HTML

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

使box水平，垂直皆置中

Flexbox

第一種方法利用Flex屬性 置中

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

1. 父層container設display:flex
2. 利用屬性定義子元素
   justify-content: center 主軸置中
   align-items:center 次軸置中

Flex + Margin auto

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

margin: auto 讓剩餘的空間自由分配

Absolute + Margin auto + TRBL0

此方法只適用於定位物件要有明確寬度與高度！

.container{
    position: relative; 

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

1. 子元素設置position: absolute，以父元素為基準做位置偏移(top / right / bottom / left)。這邊要注意，使用position:absolute需在父元素上加上相對的position:relative。
2. 將top/right/bottom/left設置為0，會自動計算可運用的空間。
3. margin: auto 讓剩餘的空間自由分配

Absolute + LT 50% + Translate

.container{
    position: relative;

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

此方法與上一個類似，使用top: 50%、left: 50%讓元素向下、向右位移50%。
但因物件對齊點為左上角，須讓 X、Y 軸負向偏移 50%
transform: translate(-50%,-50%)　才可真正置中。

Grid + justify-items/align-items

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