文字や画像を、中央揃えにするためのCSSの方法8つ

文字や画像を、中央揃えにするためのCSSの方法8つ
Advertisements

横方向で中央に揃えるときと比べると、
あれ?となりがちな印象のある、上下で中央に揃える方法と、
上下左右どちらも中央に揃えるCSSの方法について、
種類別に改めてまとめてみました。(IE11では対応していないものも含みます)

基本のHTML

下記のような、親要素の中の子要素に対して中央に揃えるCSSを記述していきます。


<div class="parent">
<p class="child"></p>
</div>

上下中央に揃える:1行のとき

1: paddingの上下を揃える


.child{
padding:15px 0;
}

ボタンなどで使いそうな、単純に上下の余白を揃えるパターンです。
インライン要素にしたまま複数行にpaddingを設定すると、
前後の行でかぶってしまいます。

2: 行の高さを、高さと等しくする


.parent{
height:100px;
}
.child{
line-height:100px;
}

1行の時に、行の高さをそのまま高さにすることで
文字を中央にするパターンです。

Advertisements

上下中央に揃える:2行以上のとき

1: transformで揃える


.parent{
position: relative;
}
.child{
position:absolute;
top:50%;
transform:translateY(-50%);
}

親要素を起点として、子要素をtop:50%;で半分ずらして、
transform:translateY(-50%);で、Y方向に行き過ぎた分を半分ずらして真ん中にします。

2: display:flex;で揃える


.parent{
display:flex;
flex-direction:column;
justify-content:center;
}

flexboxを使うパターンです。IE以外は対応しているので、
気にせず使って大丈夫そうです。

上下左右中央に揃えるとき

Advertisements

1: transformで揃える


.parent{
position: relative;
}
.child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

transformを使って、X方向とY方向の両方をずらして真ん中に揃えるパターンです。

2: display:flex;で揃える


.parent{
display:flex;
justify-content:center;
align-items:center;
}

flexboxを使って、子要素を縦方向・横方向それぞれ中央にくる指定をしています。
display:flex;は直下の子要素のみに適用されます。

margin:auto;で代用

display:flex; で並べる時に、代わりにmargin:auto;を使うことも可能です。


.parent{
display:flex;
}
.parent  > *{
margin:auto;
}

3: display:grid;で揃える


.parent{
display: grid;
place-content: center;
}

たった2行!で上下左右を中央に揃えることができるパターンです。
place-content: center;は、
align-content:center;とjustify-content: center;のショートカットになります。
こちらもplace-contentはIEは対応していません。

おまけ place-items: center;

place-items: center;も中央揃えの指定になります。
(place-items: center; はalign-items: center; とjustify-items: center;のショートカット)


.parent{
display: grid;
place-items: center;
}

ただし、親要素に高さを設定して並べてみた場合、
place-content: center;とplace-items: center;で揃え方に違いが出ます。

文字や画像を、中央揃えにするためのCSSの方法8つ
place-content: center;で揃える場合
place-items: center;で揃える場合

どちらがどちらか、パッと見で混乱してしまいそうですが、
place-content:center;が、一番幅が長い要素を基準として最低限の高さで揃うのに対し、
place-items:center;は高さも子要素で分割して上下左右中央に揃うようです。

まとめ

IE11のサポート自体が2022年の6月15日で終わるとのことで、
縦方向に対する揃え方も選択肢が多くなっており、
場合に応じて使い分けると良さそうです!

Advertisements