はじめに
CSSでスタイリングするときに必ずと行っていいほど登場するのが中央揃えです。
上下、左右、もしくはその両方を実現するために、いろいろな方法があります。
今回はその方法について網羅的にまとめました。
左右中央揃え
Flexboxを使う方法
概要
display: flex;
justify-content: center;
の2つの設定値で実現できます。
ほとんどすべての要素に適用可能です。
（ブロック要素、インライン要素、テキスト、画像など）
実装例
.container {
display: flex;
height: 150px;
background-color: #f0fca6;
justify-content: center;
}
.item {
padding: 20px;
margin: 10px;
height: 50px;
background-color: #3498db;
color: white;
}
<body>
<div class="container">
<div class="item">これは左右中央揃えされています</div>
</div>
</body>
実装のポイント
左右中央揃えにしたいコンテンツの親要素に対してFlexboxのスタイルを適用します。
実際のレイアウト
親要素内で子要素が左右中央揃えになっていることがわかります。
Grid Layoutを使用する方法
概要
display: grid;
justify-items: center;
の2つの設定値で実現できます。
ほとんどすべての要素に適用可能です。
（ブロック要素、インライン要素、テキスト、画像など）
実装例
.container {
display: grid;
height: 150px;
background-color: #f0fca6;
justify-items: center;
}
.item {
padding: 20px;
margin: 10px;
height: 50px;
background-color: #3498db;
color: white;
}
<body>
<div class="container">
<div class="item">これは左右中央揃えされています</div>
</div>
</body>
実装のポイント
左右中央揃えにしたいコンテンツの親要素に対してGrid Layoutのスタイルを適用します。
見た目
親要素内で子要素が左右中央揃えになっていることがわかります。
位置を計算する方法
概要
要素の位置を絶対値から計算することで、左右中央揃えにします。
ほとんどすべての要素に適用可能ですが、単一の要素にしか使えません。
実装例
.container {
position: relative;
height: 150px;
background-color: #f0fca6;
justify-items: center;
}
.item {
position: absolute;
left: 50%;
transform: translateX(-50%);
padding: 20px;
margin-top: 10px;
height: 50px;
background-color: #3498db;
color: white;
}
<body>
<div class="container">
<div class="item">これは左右中央揃えされています</div>
</div>
</body>
実装のポイント
左右中央そろえにしたいコンテンツの親要素に対してposition: relative;を指定します。
これにより、子要素の配置の基準点を作ります。
子要素に対しては3つのスタイルを適用します。
position: absolute;で要素の配置を自由にできるようにします。
left: 50%;で子要素の左端が、親要素の中心へくるようにします。
transform: translateX(-50%)で子要素自身の幅の半分だけ、左側に移動させます。
これにより、親要素に対して左右中央揃えにすることができます。
見た目
親要素内で子要素が左右中央揃えになっていることがわかります。
marginを使用する方法
概要
margin:auto;を設定することで、左右からの余白を自動計算し、中央揃えにします。
ブロック要素にしか適用できません。
実装例
.container {
height: 150px;
background-color: #f0fca6;
}
.item {
margin-top: 10px;
margin-left: auto;
margin-right: auto;
padding: 20px;
width: 280px;
height: 50px;
background-color: #3498db;
color: white;
}
<body>
<div class="container">
<div class="item">これは左右中央揃えされています</div>
</div>
</body>
実装のポイント
margin-left: auto;
margin-right: auto;
で左右のマージンを自動計算としていることです。
marginは上下、左右をまとめて指定することができるので、
margin: 10px auto;
のような指定もできます。
見た目
親要素内で子要素が左右中央揃えになっていることがわかります
注目すべき点は、ブロック要素のみが左右中央になっているだけで、divタグ内のテキストには適用されていないことです。
これは、marginがdivタグの外側に対して設定されているので、中のテキストはその影響を受けないためです。
text-alignを使用する方法
概要
text-align: centerを使って、内部のインラインコンテンツを左右中央揃えします。
ブロック要素には適用できません。
実装例
実装のポイント
左右中央揃えにしたい親コンテンツにtext-align: center;を指定します。
また、divはブロック要素なので本来適用できませんが、display: inline-block;を指定することで、インラインブロックに変更し、適用対象としています。
見た目
親要素内で子要素が左右中央揃えになっていることがわかります。
左右中央揃えを設定する方法は以上です。
上下中央揃え
Flexboxを使う方法
概要
display: flex;
align-items: center;
の2つの設定値で実現できます。
ほとんどすべての要素に適用可能です。
（ブロック要素、インライン要素、テキスト、画像など）
実装例
.container {
display: flex;
height: 300px;
background-color: #f0fca6;
align-items: center;
}
.item {
padding: 20px;
margin: 10px;
height: 50px;
background-color: #3498db;
color: white;
}
<body>
<div class="container">
<div class="item">これは上下中央揃えされています</div>
</div>
</body>
実装のポイント
上下中央揃えにしたいコンテンツの親要素に対してFlexboxのスタイルを適用します。
実際のレイアウト
親要素内で子要素が上下中央揃えになっていることがわかります。
Grid Layoutを使用する方法
概要
display: grid;
align-items: center;
の2つの設定値で実現できます。
ほとんどすべての要素に適用可能です。
（ブロック要素、インライン要素、テキスト、画像など）
実装例
.container {
display: grid;
height: 300px;
background-color: #f0fca6;
align-items: center;
}
.item {
padding: 20px;
margin: 10px;
height: 50px;
width: 280px;
background-color: #3498db;
color: white;
}
<body>
<div class="container">
<div class="item">これは上下中央揃えされています</div>
</div>
</body>
実装のポイント
上下中央揃えにしたいコンテンツの親要素に対してGrid Layoutのスタイルを適用します。
見た目
親要素内で子要素が上下中央揃えになっていることがわかります。
位置を計算する方法
概要
要素の位置を絶対値から計算することで、上下中央揃えにします。
ほとんどすべての要素に適用可能ですが、単一の要素にしか使えません。
実装例
.container {
position: relative;
height: 300px;
background-color: #f0fca6;
justify-items: center;
}
.item {
position: absolute;
top: 50%;
transform: translatey(-50%);
padding: 20px;
height: 50px;
background-color: #3498db;
color: white;
}
<body>
<div class="container">
<div class="item">これは上下中央揃えされています</div>
</div>
</body>
実装のポイント
上下中央そろえにしたいコンテンツの親要素に対してposition: relative;を指定します。
これにより、子要素の配置の基準点を作ります。
子要素に対しては3つのスタイルを適用します。
position: absolute;で要素の配置を自由にできるようにします。
top: 50%;で子要素の上端が、親要素の中心へくるようにします。
transform: translateY(-50%)で子要素自身の高さの半分だけ、上側に移動させます。
これにより、親要素に対して上下中央揃えにすることができます。
見た目
親要素内で子要素が上下中央揃えになっていることがわかります。
line-heightを使用する方法
概要
行の高さを、親要素の高さと同じにすることでテキストを上下中央揃えにします。
単一行のテキストにしか適用できません。
実装例
.container {
height: 300px;
background-color: #f0f0f0;
}
.item {
line-height: 300px; /* コンテナの高さと同じ値 */
background-color: #1abc9c;
color: white;
}
<body>
<div class="container">
<div class="item">これは上下中央揃えされています</div>
</div>
</body>
実装のポイント
親要素の高さとline-heightの高さを一致させます。
見た目
テキストが上下中央揃えになっていることがわかります。
まとめ
左右中央揃え、上下中央揃えの方法についてまとめました。
2つを組み合わせることで、上下左右の中央揃えも可能です。
個人的にはFlexboxでスタイルを適用するのが一番わかりやすく、汎用性が高いと思っています。
それぞれの要件に合わせて柔軟に使い分けられるようにしたいですね。