上下に中央揃え&上下左右で真ん中揃えにするCSS

Advertisements

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

  1. 上下中央に揃える:1行のとき
  2. 上下中央に揃える:2行以上のとき
  3. 上下左右中央に揃える
  4. おまけ place-items: center;
  5. まとめ

基本のHTML

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


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

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

1-1 paddingの上下を揃える


.child{
padding:15px 0;
}

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

1-2 行の高さ=高さに


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

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

Advertisements

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

2-1 transformで揃える


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

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

2-2 display:flex;で揃える


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

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

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

Advertisements

3-1 transformで揃える


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

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

3-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-3 display:grid;で揃える


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

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

4 おまけ 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;で揃える場合

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

まとめ

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

WEBのその他の記事はこちら

Advertisements

Similar Posts