CSSで中央揃えを実装しようとして、paddingで無理やり余白を埋めたり、小さい要素がどうしても動かず混乱した経験はありませんか？
中央揃えの仕組みを理解する鍵は、「要素の中身（テキストなど）を動かす」のか、「要素（箱）そのものを動かす」のかを明確に区別することです。
-
要素の中身（インライン）を中央に寄せる:
text-align: center;を使う -
要素自体（ブロック）を中央に配置する: 幅（
width）を指定し、margin: auto;を使う
この2つのルールの違いと、なぜpaddingで寄せるのが非推奨なのかを、インライン要素とブロック要素の違いを交えて解説します。
要素の中身（テキストなど）を中央に寄せる：text-align
テキストや画像など、箱の中に入っている「コンテンツ（インライン要素）」を中央に揃えたい場合は、親のブロック要素に対して text-align: center; を指定します。
text-align は CSS のプロパティで、ブロック要素内におけるインラインレベルコンテンツの水平方向の配置を設定します。
<div class="text-box">
<p>このテキスト（インラインコンテンツ）が中央に寄ります。</p>
<span>spanなどのインライン要素も同様です。</span>
</div>
.text-box {
background-color: #f0f0f0;
/* ブロック要素内のインラインコンテンツを中央揃えにする */
text-align: center;
}
この方法はあくまで「箱の中の文字」を整列させるものです。要素そのものの大きさや位置が変わるわけではありません。
要素（箱）そのものを中央に配置する：margin: auto
見出しやカード型コンポーネントなど、ある程度の大きさを持った「要素自体（ブロック要素）」を画面や親要素の中央に配置したい場合は、margin を使用します。
ブロック要素はデフォルトで横幅いっぱい（100%）に広がろうとする性質があります。そのため、要素自体を中央に配置するには、まず要素に特定の幅（width）を持たせる必要があります。その上で左右のマージンに auto を指定します。
左右のマージンが auto の場合は、両方に均等に余白が割り当てられます。
<div class="parent-container">
<div class="center-block">
この箱（ブロック要素）自体が中央に配置されます。
</div>
</div>
.center-block {
/* 1. 箱の幅を指定する */
width: 300px;
background-color: #add8e6;
/* 2. 左右のマージンにautoを指定し、余白を均等に割り当てる */
margin-left: auto;
margin-right: auto;
/* 短縮表記: margin: 0 auto; でも可 */
}
なぜ padding で中央に寄せてはいけないのか？
要素自体の大きさを広げて padding で無理やりコンテンツを中央に押しやる方法は、一見中央に揃っているように見えますが、レイアウト崩れの原因になります。
マージンは要素の外側に余白を作成し、padding は要素の内側に余白を作成します。つまり、paddingを増やすと「箱自体が巨大化」してしまい、他の要素との間隔（マージン）の制御が難しくなるためです。要素を動かす時は外側の余白である margin を使うのが適切なアプローチです。
迷ったら Flexbox を使うのも手
現代のCSSでは、上記の違いを意識しつつも、より直感的に配置を制御できる Flexbox が主流になっています。親要素をFlexコンテナにすることで、要素自体も中身のコンテンツも、一貫したルールで中央配置が可能です。
.flex-container {
display: flex;
justify-content: center; /* 水平方向の中央揃え */
align-items: center; /* 垂直方向の中央揃え */
}
「中身を動かすのか」「箱自体を動かすのか」。この原則を覚えておけば、もうCSSの中央揃えで迷うことはなくなるはずです。
参考資料
Top comments (0)