Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

【パターン①】
親要素には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%);
}

その他の方法 → CSSで中央寄せの方法いろいろメモ

SatoshiAoki0419
WEBデザイン学習記録 フロントエンドエンジニアを目指して勉強中。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away