CSSで中央寄せをする方法を徹底解説！ずれる原因と対策も紹介
公開日：2021.09.30
スキルアップ
CSSを利用して要素を中央寄せしたい場合には、さまざまな方法があります。今回は、左右（横方向）・上下（縦方向）・上下左右の3パターンに分けて、CSSでの指定方法を解説します。また、CSSで中央寄せを指定してもずれてしまう原因とその対策についてもまとめました。
CSSの勉強を進めていて、中央寄せができずに悩んでいる場合は、ぜひ見直しするポイントとしてご活用ください。
CSSで中央寄せをする方法
CSSを使ってHTMLの要素を中央に寄せる方法について、左右・上下・左右上下の3パターンに分けて解説します。中央寄せしたい要素の種類によって、指定方法が異なる場合もあるため、要素の種類を整理するところから順番に見ていきましょう。
中央寄せをしたい要素を整理
要素を中央に寄せる場合、まず中央寄せの対象となる要素が、以下のどれになるのか確認しましょう。
- ブロック要素
- インライン要素
- インラインブロック要素
それぞれの要素を示すコードは、以下の通りです。
【ブロック要素：コンテンツの1グループとなる要素】
HTMLで記載すると以下の部分です。
<div class="display_test">
ブロック要素その1
</div>
【インライン要素：文章などの一部となる要素】
HTMLで記載すると以下の部分です。
<span class="display_test">
インライン要素
</span>
【インラインブロック要素：ブロック要素とインライン要素の性質を併せ持つ要素】
HTML
<div class="display_test">
インラインブロック要素
</div>
CSS
.display_test {
display: inline-block; /* インラインブロック要素を指定 */
}
左右（横）の中央寄せ
左右（横方向）に中央寄せをしたい場合は、要素別に以下の方法を使いましょう。
【インライン要素の場合】
中央寄せをしたいインライン要素の親要素に対し「text-align: center;」（文章の揃え位置を指定するプロパティ）を追加します。
HTML
<div class="centering_parent">
<span class="centering_item">
インライン要素
</span>
</div>
CSS
.centering_parent { /* 中央寄せしたい親要素 */
text-align: center; /* 中央寄せの指定 */
}
.centering_item { /* 中央寄せしたい要素 */
background-color: #FFEB3B;
}
【ブロック要素の場合】
中央寄せしたいブロック要素自体に「margin:0 auto」を指定します。この指定をすることで、左右幅を自動的に計算するので横方向への中央寄せができます。
HTML
<div class="centering_parent">
<div class="centering_item">
ブロック要素
</div>
</div>
CSS
.centering_item { /* 中央寄せする要素 */
margin: 0 auto; /* 中央寄せ */
}
【インラインブロック要素の場合】
インラインブロック要素の場合は、インライン要素のように、親要素へ「text-align: center;」を指定。要素自身には、インラインブロック要素の指定「display: inline-block;」を入れればOKです。
HTML
<div class="centering_parent">
<div class="centering_item">インラインブロック要素 </div>
<div class="centering_item">インラインブロック要素 </div>
<div class="centering_item">インラインブロック要素 </div>
</div>
CSS
.centering_parent { /* 中央寄せする要素の親 */
text-align: center; /* 中央寄せ */
}
.centering_item { /* 中央寄せする要素 */
display: inline-block; /* インラインブロック要素として指定 */
}
上下（縦）の中央寄せ
次に、縦方向への中央寄せについて、要素別に見ていきます。
【インライン要素の場合】
インライン要素の場合は、「vertical-align: middle;」を使えば、親要素の中で中央寄せができます。
HTML
<div class="centering_parent">
<span class="centering_item">
インライン要素
</span>
<span class="centering_item font_big">
インライン要素（大きなフォント）
</span>
</div>
CSS
.font_big {
font-size: 50px;
}
.centering_item {
vertical-align: middle; /* 中央寄せ */
}
【ブロック要素の場合】
ブロック要素を上下中央揃えにする場合、ブロック要素のままでは上下中央揃えができません。そのため、displayプロパティを使って、インライン要素やインラインブロック要素に変更します。または、親要素を基準に中央寄せするなら、親要素に高さ、display: table-cell、vertical-align:centerを指定します。以下は、親要素を基準に上下中央寄せする例です。
HTML
<div class="centering_parent"> /* 中央寄せする要素の親 */
<div class="centering_item">
ブロック要素
</div>
</div>
CSS
.centering_parent { /* 中央寄せする要素の親 */
display: table-cell; /* テーブルセルにする */
vertical-align: middle; /* 中央寄せ */
}
.centering_item { /* 中央寄せする要素 */
}
【インラインブロック要素の場合】
インラインブロック要素の場合は、インライン要素と同じ指定で上下中央寄せが可能です。
HTML
<div class="centering_parent">
<div class="centering_item">インラインブロック要素 </div>
<div class="centering_item">インラインブロック要素 </div>
<div class="centering_item">インラインブロック要素 </div>
</div>
CSS
.centering_parent { /* 中央寄せする要素の親 */
display: table-cell; /* テーブルセルにする */
vertical-align: middle; /* 中央寄せ */
}
.centering_item { /* 中央寄せする要素 */
display: inline-block; /* インラインブロック指定 */
}
左右上下の中央揃え
左右上下の中央揃えについては、要素を気にする必要はなく、「position: absolute;」や「transform」を使います。
【margin:autoを使う方法】
中央寄せしたい要素にmargin:autoを付加して上下中央寄せをします。この方法では、要素自体の高さと幅を指定しなければならない点に要注意です。
HTML
<div class="centering_parent">
<div class="centering_item">
</div>
</div>
CSS
.centering_parent { /* 中央寄せする要素の親 */
position: relative; /* 位置指定の基準点にする */
}
.centering_item { /* 中央寄せする要素 */
position: absolute; /* 位置指定 */
top: 0; /* 位置指定 */
bottom: 0; /* 位置指定 */
left: 0; /* 位置指定 */
right: 0; /* 位置指定 */
margin: auto; /* 中央寄せ */
width: 150px; /* 幅指定（必須） */
height: 80px; /* 高さ指定（必須） */
}
この方法は、幅と高さが明確な場合にのみおすすめする方法です。幅と高さが可変の場合は崩れてしまうので、次に示すtransformプロパティを使う方法で中央寄せをしましょう。
【transformを使った方法】
transformプロパティは、要素の形などを変形させることが可能で、要素の位置も指定できます。Transformを使用した上下左右中央寄せの例は、以下の通りです。
HTML
<div class="centering_parent">
<div class="centering_item">
上下左右中央寄せをする要素
</div>
</div>
CSS
.centering_parent { /* 中央寄せする要素の親 */
position: relative; /* 位置指定の基準点にする */
}
.centering_item { /* 中央寄せする要素 */
position: absolute; /* 位置指定 */
top: 50%; /* 親要素の半分下にずらす */
left: 50%; /* 親要素の半分右にずらす */
transform: translateY(-50%) translateX(-50%); /* 要素自体の半分、上と左にずらす */
}
最初に、topプロパティとleftプロパティで、中央寄せしたい要素を親要素の50％（半分）までずらします。その後、transformプロパティを使って、要素自体の半分、上と左に戻す、という指定を行っています。
【insetを使った方法】
上記のCSS部分をより一層シンプルに記載し、上下左右中央寄せを実現する方法として、「中央寄せしたい要素にinsetプロパティを使う」といった方法もあります。insetプロパティは、top、right、bottom、leftを一括指定でき、「0」と指定してmargin:auto;と合わせて中央揃えを実現します。
HTML
<div class="centering_parent">
<div class="centering_item">
上下左右中央寄せをする要素
</div>
</div>
CSS
.centering_parent { /* 中央寄せする要素の親 */
position: relative; /* 位置指定の基準点にする */
}
.centering_item { /* 中央寄せする要素 */
position: absolute; /* 位置指定 */
inset: 0; /* top、right、bottom、left一括で0指定 */
margin: auto; /* 中央寄せ */
}
CSSで中央寄せしてもずれる原因と対策
CSSで中央寄せしても、ずれる場合があります。その原因と対策を3パターンピックアップしました。以下の原因に該当していないかを見直してみてください。
text-align: centerがずれる場合
text-align: centerを指定している要素がブロック要素の場合、この指定は有効になりません。ブロック要素の場合は、「margin:0 auto」を使用した左右中央寄せをお試しください。
また、親要素に対してtext-align: centerを指定しても、中央寄せをしたい要素に反映されません。text-align: centerを使う場合は、中央寄せをしたい要素自身に指定しましょう。
margin: 0 autoが効かない場合
margin: 0 autoは、ブロック要素の中央寄せに使うため、インライン要素に使用しても中央寄せにはなりません。要素がインライン要素になっていないかを確認してください。また、margin: 0 auto指定は、親要素を基準にした中央寄せなので、親要素の幅が小さいときなどはうまく機能しません。
position: absoluteができない場合
中央寄せしたい要素に対して、position: absoluteを指定してもうまくいかない場合は、親要素でrelative指定を忘れていないかを確認しましょう。「両者はセットで使用する」と覚えておけば間違いありません。
CSSの中央寄せの挙動を把握しよう
CSSでの中央寄せに関する指定方法について見てきました。まずは、中央寄せをしたい要素が以下のいずれかを確認し、親要素の指定にも注意しながら、意図した通りの中央寄せを実現しましょう。
- ブロック要素
- インライン要素
- インラインブロック要素
中央寄せの指定がうまくいかない場合は、親要素の指定や、要素の違いなどに着目して見直してみてください。
Webエンジニアになるには、CSSやHTMLの学習は必須です。Javascriptなどの勉強も並行で進め、自信がついてきたらWebエンジニアの求人に応募してみてはいかがでしょうか。
AKKODiSは希望の雇用形態で働けるAKKODiSで新しい一歩を踏み出してみませんか。
（2021年9月現在）
