どうも7noteです。gridとflexboxを使った中央揃えの方法一覧
webではコンテンツの中央揃えは頻出します。
上下の中央揃え、左右の中央揃え、上下左右の中央揃えの書き方をマスターすることはWEB制作では必須になるでしょう。
grid、もしくはflexboxを使った中央揃えは指定した子要素を中央揃えにすることができます。
なので、中央揃えにしたい親要素に対して使用します。
「上下左右」の中央揃え
■ flexboxを使った「上下左右」の中央揃え
style.css
.oya {
display: flex;
justify-content: center;
align-items: center;
}
■ gridを使った「左右左右」の中央揃え
style.css
.oya {
display: grid;
justify-content: center;
align-items: center;
/* もしくは */
display: grid;
place-items: center;
}
「上下」の中央揃え
■ flexboxを使った「上下」の中央揃え
style.css
.oya {
display: flex;
align-items: center;
}
■ gridを使った「左右」の中央揃え
style.css
.oya {
display: grid;
align-items: center;
}
「左右」の中央揃え
■ flexboxを使った「左右」の中央揃え
style.css
.oya {
display: flex;
justify-content: center;
}
■ gridを使った「左右」の中央揃え
style.css
.oya {
display: grid;
justify-content: center;
}
まとめ
上下左右の中央寄せをするのであれば、flexboxかgridが有力な方法でしょう。
上下左右中央寄せを最も短く書ける方法なら、
display: grid;
place-items: center;
これで2行で書くことができます。
これ以外の方法でも中央揃えにする方法は様々ありますが、flexboxかgridが使えればレイアウトを作成するのに困る場面はそこまで多くないでしょう。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ
↧