はじめてのWEBサイト作成
HTML
CSS
JavaScript
CSSで要素を上下および左右中央揃えにする方法はいくつかあります。
以下に主な方法をおすすめ順に5つ紹介します。
Flexboxを使用する方法
Flexboxを使用すると、中央揃えが簡単に行えます。
私がコーディングするときは、まずFlexboxを使います。
そのあとで、いろいろと都合が悪くなったら他の方法を採用する感じです。
<div class="container">
<div class="centered">
中央揃え
</div>
</div>.container {
display: flex;
justify-content: center; /* 横方向の中央揃え */
align-items: center; /* 縦方向の中央揃え */
}Gridレイアウトを使用する方法
Gridレイアウトを使用して、中央揃えを行う方法です。
こちらは上下左右を一括で指定できるため、省力化できます。
<div class="container">
<div class="centered">
中央揃え
</div>
</div>.container {
display: grid;
place-items: center; /* 縦横の中央揃え一括指定 */
}transformプロパティを使用する方法
positionプロパティとtransformプロパティを組み合わせて中央揃えを行う方法です。
ここから使い勝手や使いどころが難しくなります。
absoluteを使用すると要素が高さを持たなくなるという仕様のため、テキスト量に応じて要素の高さが自動調整されていたのに、調整されなくなります。
<div class="container">
<div class="centered">
中央揃え
</div>
</div>.container {
position: relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 中央に移動 */
}table-cellを使用する方法
CSSのテーブルレイアウトを使って中央揃えを行う方法です。
表組のセルじゃない要素をセルとする…個人的には気持ち悪いので使いません。
Flexboxが実装される前はグローバルナビゲーションなど、要素を横に並べる時にtableを使用していました。
この時は横1行の表組だと割り切って使っていました。
その時に使っていた中央寄せにする方法です。
<div class="container">
<div class="centered">
中央揃え
</div>
</div>.container {
display: table;
}
.centered {
display: table-cell;
vertical-align: middle; /* 縦方向の中央揃え */
text-align: center; /* 横方向の中央揃え */
}line-heightを使用する方法
行高を使用して要素を中央に揃える方法です。
テキストの中央揃えに使用されることがままあります。
<div class="container">
<div class="centered">
中央揃え
</div>
</div>.centered {
height: 4rem;
line-height: 4rem; /* 行の高さをコンテナの高さと同じにする */
vertical-align: middle; /* 縦方向の中央揃え */
text-align: center; /* 横方向の中央揃え */
}まとめ
FlexboxとGridは柔軟なレイアウトを実現でき、レスポンシブデザインに最適です。
Transformは簡便ですが、親要素の相対位置が必要です。
中央寄せしたい要素だけにCSSを設定すればよいわけではないので、使いづらさを感じます。
他の2つは紹介しましたが、現在のコーディングではあまり使われません。
まずはご自身でそれぞれ使ってみて、使い勝手を確認してみてください。
そして実際の業務では、先任者が自分の込みで記述方法を決めている現場が多いです。
どんな記述方法でも対応できるようにしておきましょう。