センタリングテクニック
問題
要素のセンタリングはCSSの最も基本的なタスクの1つですが、AIエージェントは過度に複雑な方法や不適切な方法を使いがちです。よくあるミスとしては、非インライン要素に text-align: center を使う、flexboxやgridで十分なのに transform: translate(-50%, -50%) を適用する、複数のセンタリング手法を重ねて使う、レイアウトが求めていないのに position: absolute に頼る、などがあります。
解決方法
モダンCSSには、目的に合った簡潔なセンタリング手法が用意されています。適切な手法はコンテキストによって異なります：何をセンタリングするのか、どの軸が必要か、親要素に高さが定義されているか、を考慮しましょう。
コード例
margin: auto による水平センタリング
幅が定義されたブロックレベル要素には、margin: auto が最もシンプルな水平センタリング手法です。垂直方向のセンタリングはできません。
.centered-block {
width: 600px; /* or max-width */
margin-inline: auto;
}
<div class="centered-block">
Horizontally centered block element.
</div>
margin-inline: auto は margin-left: auto; margin-right: auto の論理プロパティ版で、すべての書字方向で正しく動作します。
インライン/テキストコンテンツの水平センタリング
.text-center {
text-align: center;
}
これはブロックコンテナ内のインラインコンテンツ（テキスト、<span>、<img>、inline-block要素）をセンタリングします。ブロックレベルの子要素はセンタリングされません。
Flexbox センタリング（両軸）
.flex-center {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
}
<div class="flex-center" style="min-height: 300px;">
<div>Centered both ways</div>
</div>
垂直センタリングを見えるようにするには、親要素に高さ（または min-height）が必要です。
Grid センタリング（両軸、最も簡潔）
.grid-center {
display: grid;
place-items: center;
}
<div class="grid-center" style="min-height: 300px;">
<div>Centered with one line</div>
</div>
place-items: center は align-items: center; justify-items: center のショートハンドです。CSSで最も簡潔なセンタリング手法です。
place-content を使った Grid センタリング
単一の子要素をセンタリングする別の方法です：
.grid-center-alt {
display: grid;
place-content: center;
min-height: 100vh;
}
違い：place-items はグリッドエリア内でアイテムを揃え、place-content はグリッドトラック自体を揃えます。単一の子要素のセンタリングでは、どちらも同じ結果になります。
Flex または Grid 内での margin: auto によるセンタリング
.container {
display: flex; /* or display: grid */
min-height: 100vh;
}
.child {
margin: auto;
}
flexまたはgridアイテムに margin: auto を設定すると、その軸の利用可能なスペースをすべて吸収し、水平・垂直の両方向にセンタリングされます。
絶対配置と inset を使ったセンタリング
位置指定された親要素の上にオーバーレイコンテンツをセンタリングする場合に使います：
.overlay-parent {
position: relative;
}
.overlay-centered {
position: absolute;
inset: 0;
margin: auto;
width: fit-content;
height: fit-content;
}
Transform テクニック（レガシー）
.transform-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
このテクニックは今でも有効ですが、モダンCSSではほとんどの場合最適な選択肢ではありません。非Retinaディスプレイではサブピクセルレンダリングによりテキストがぼやけることがあります。flexboxまたはgridを使いましょう。
ライブプレビュー
クイックリファレンス
| シナリオ | 手法 |
|---|---|
| ブロック要素、水平のみ | margin-inline: auto（幅の指定が必要） |
| インライン/テキストコンテンツ、水平のみ | 親要素に text-align: center |
| 単一の子要素、両軸 | display: grid; place-items: center |
| 複数の子要素、両軸 | display: flex; justify-content: center; align-items: center |
| flex/grid内の子要素、両軸 | 子要素に margin: auto |
| 位置指定された親上のオーバーレイ | position: absolute; inset: 0; margin: auto |
| レガシー / flexbox以前のコードベース | transform: translate(-50%, -50%) |
AIがよくやるミス
transform: translate(-50%, -50%)をデフォルトとして使う。 このテクニックはレガシーなフォールバックです。モダンCSSにはflexboxやgridを使ったより簡潔な方法があります。- 親要素に高さを設定し忘れる。 垂直センタリングには親要素に高さまたは min-height が必要です。これがないと、親要素がコンテンツの高さに縮み、センタリングが効いていないように見えます。
- ブロック要素に
text-align: centerを使う。text-alignはインラインコンテンツにのみ作用します。<div>の中で別の<div>をセンタリングすることはできません。 - 複数のセンタリング手法を重ねる。
margin: autoとjustify-content: centerの両方を適用するのは冗長です。1つの方法を選びましょう。 - フロー内の要素に
position: absoluteを使う。 絶対配置は要素をドキュメントフローから外すため、レイアウト内のコンテンツのセンタリングには通常不適切です。 margin-inline: autoの代わりにmargin: 0 autoを書く。 どちらも左右方向では動作しますが、物理プロパティ版は垂直方向のマージンを0にリセットしてしまい、意図したスペーシングを上書きする可能性があります。margin-inline: autoは水平方向のみに影響します。
使い分け
Grid place-items: center
単一の子要素をセンタリングするのに最適です。最も簡潔な構文です。親要素を他のレイアウト目的でflexコンテナにする必要がない場合に使いましょう。
Flexbox センタリング
親要素がすでにflexコンテナである場合、または複数のアイテムを一方の軸でセンタリングしつつ別の軸で配置する場合に最適です。
margin-inline: auto
既知の幅またはmax-widthを持つブロック要素を水平センタリングするのに最適です。親要素のdisplayタイプを変更する必要がありません。
絶対配置
オーバーレイ、モーダル、ツールチップ、およびドキュメントフローから外して他のコンテンツの上に配置する必要がある要素にのみ使いましょう。
Tailwind CSS
Tailwindは、すべてのセンタリング手法に対応する簡潔なユーティリティクラスを提供しています。