【CSSで上下左右中央寄せにする方法】 #CSS

【パターン①】
親要素にはposition: absolute;かposition: relative; を設定してください。
body に対してセンター寄せしたい場合はそのままでOKです。
上下左右中央寄せしたい要素に以下のCSSを設定します。

css


position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 任意の値
height: 任意の値

補足：ラッパーの幅と高さがセンター寄せする要素より小さい場合

css

position: absolute;
top: -100%;
left: -100%;
right: -100%;
bottom: -100%;
margin: auto;
width: 任意の値
height: 任意の値

【パターン②】

css


html, body, main {
    height: 100%;           
}
main {
    display: flex;         
    justify-content: center;
    align-items: center;    
}

【パターン③】

CSS

.hoge {
    height: calc(100px - 2%);
}