文字や画像を、中央揃えにするためのCSSの方法8つ
横方向で中央に揃えるときと比べると、
あれ？となりがちな印象のある、上下で中央に揃える方法と、
上下左右どちらも中央に揃えるCSSの方法について、
種類別に改めてまとめてみました。(IE11では対応していないものも含みます)
基本のHTML
下記のような、親要素の中の子要素に対して中央に揃えるCSSを記述していきます。
<div class="parent">
<p class="child"></p>
</div>
上下中央に揃える:１行のとき
1: paddingの上下を揃える
.child{
padding:15px 0;
}
ボタンなどで使いそうな、単純に上下の余白を揃えるパターンです。
インライン要素にしたまま複数行にpaddingを設定すると、
前後の行でかぶってしまいます。
2: 行の高さを、高さと等しくする
.parent{
height:100px;
}
.child{
line-height:100px;
}
1行の時に、行の高さをそのまま高さにすることで
文字を中央にするパターンです。
上下中央に揃える:２行以上のとき
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以外は対応しているので、
気にせず使って大丈夫そうです。
上下左右中央に揃えるとき
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;
}
たった２行！で上下左右を中央に揃えることができるパターンです。
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;で揃え方に違いが出ます。
どちらがどちらか、パッと見で混乱してしまいそうですが、
place-content:center;が、一番幅が長い要素を基準として最低限の高さで揃うのに対し、
place-items:center;は高さも子要素で分割して上下左右中央に揃うようです。
まとめ
IE11のサポート自体が2022年の6月15日で終わるとのことで、
縦方向に対する揃え方も選択肢が多くなっており、
場合に応じて使い分けると良さそうです！
