【初心者向け】要素を上下左右の中央に配置したい時のCSSの書き方

html
  • URLをコピーしました!
生徒

WEBページを作る時に中央にうまく配置できない時があります

先生

CSSで要素を中央に配置する方法について説明します

この記事で分かること
  • CSSで要素を水平方向や垂直方法の中央に配置する方法
目次

HTMLやCSSを理解して適したCSSを指定する

WEBページを作る時に要素を中央に配置したいことはよくありますが、CSSを正しく理解していないと、上手く中央に配置するのに手間取ってしまうことがあります。

この記事では、CSSで要素を中央に配置する方法について説明します。

インライン要素とブロック要素に付いて

HTMLの要素は、以前はインライン要素ブロック要素として以下のように定義されていました。

ブロック要素
インライン要素
  • <div> <p>など
  • 前後で改行される
  • widthやhightを指定できる
  • <span> <a> <img>など
  • 改行されず前後と同じ行になる
  • サイズを指定できない

HTML5では、以下のコンテンツカテゴリーという定義に変わり、インライン要素、ブロック要素の定義は無くなりましたが、displayプロパティによる各タグの性質はほとんど変わっていません。

水平方向の中央寄せ

子要素を水平方向の中央に配置したい場合、以下の方法があります。

子要素display: inline;の要素(インライン要素)の場合

親要素text-align: center;を指定する

子要素がインライン要素の場合、親要素text-align: center;を指定すると、子要素が親要素の水平方向中央に配置されます。

See the Pen text-align by mik20621 (@mik20621) on CodePen.

pタグはブロック要素

勘違いしやすい点としては、pタグはインライン要素ではなくブロック要素です。

下の例では pタグにtext-align: center;が効いているように見えますが、親要素のdivタグに指定したCSSが pタグにも継承されてpタグ内の文字が中央寄せになっています。

See the Pen p-tag by mik20621 (@mik20621) on CodePen.

親要素display: flex; justify-content: center;を指定する

子要素がインライン要素の場合、親要素display: flex;justify-content: center; を指定することでも子要素が水平方向の中央に配置されます。

See the Pen flex-justify-content by mik20621 (@mik20621) on CodePen.

子要素がdisplay: block;の要素(ブロック要素)の場合

margin: 0 auto; を指定する

子要素がブロック要素の場合は、子要素にmargin-left: auto;margin-right: auto; を指定すると、親要素の水平方向の中央に配置できます。

margin-left: auto; margin-right: auto; と分けるのではなく、margin: 0 auto; とまとめて書くことがほとんどです。

See the Pen Untitled by mik20621 (@mik20621) on CodePen.

親要素にdisplay: flex; justify-content: center; を指定する

ブロック要素の場合、display: flex;justify-content: center; を指定することでも水平方向の中央に配置できます。

See the Pen justify-content_center by mik20621 (@mik20621) on CodePen.

縦方向中央寄せ

要素を垂直方向の中央に配置したい場合は、以下の方法があります。

display: inline; の要素(インライン要素)の場合

line-height を親要素の高さと同じサイズにする

1行テキストの場合は line-height を親要素の height と同じ高さにすると垂直方向の中央に配置されます。

See the Pen line-height by mik20621 (@mik20621) on CodePen.

vertical-align: middle;

vertical-align: middle;を指定すると、その要素は縦方向の中央に配置されます。

vertical-align: middle; が効くのは display: inline(またはinline-block)、あるいはtable-cell の時でdisplay: blockに対しては効きません。

display: table-cell;

display: table-cell; を指定した要素は高さが親要素と同じになって、vertical-align: middle;を指定すると要素が垂直方向の中央に配置されます。

display: table-cell; を指定する時は、親要素に display: table; を指定する必要があります。

See the Pen vertical_align_middle by mik20621 (@mik20621) on CodePen.

display: inline-block;

display: inline-block;を指定するとその要素が親要素の縦方向の中央に配置されます。

See the Pen vertical_align_middle by mik20621 (@mik20621) on CodePen.

縦横両方の中央寄せ

子要素を水平方向と垂直方法の両方の中央に配置したい場合、以下の方法があります。

親要素にdisplay: flex;と子要素の中央寄せにするプロパティを指定する

親要素にdisplay: flex; を指定して、さらに子要素を水平方向中央にするjustify-content: center;、子要素を垂直方向中央にするalign-items: center;を指定すると、子要素が上下左右が中央揃えになります。

See the Pen align-items_center; by mik20621 (@mik20621) on CodePen.

親要素にposition: relative; 子要素にposition: absolute;を指定する

親要素にposition: relative;子要素にposition: absolute;を指定すると、親要素から見た位置で子要素の位置を指定できるようになります。

子要素をmargin: auto;で中央寄せする場合

  • 親要素に position: relative;、子要素に position: absolute; を指定する。(子要素の位置を親要素の位置を基に指定できるようにする。)
  • 子要素に top: 0; bottom: 0; left: 0; を指定する。(子要素の位置を親要素と同じにする。)
  • 子要素に margin: auto;を指定する。(子要素の位置を、親要素の上下中央にする。)

See the Pen align-items_center; by mik20621 (@mik20621) on CodePen.

子要素をtransformプロパティで中央寄せする場合

  • 親要素に position: relative;、子要素に position: absolute; を指定する。(子要素の位置を親要素の位置を基に指定できるようにする。)
  • 子要素に top: 50%; left: 50%; を指定する。(子要素の左上隅の位置を親要素の上下中央にする。)
  • 子要素に translateX(-50%); translateY(-50%); を指定する。(子要素の位置を、自分のサイズの半分だけ上と左にずらす。)

See the Pen position: absolute; + margin: auto; by mik20621 (@mik20621) on CodePen.

よかったらシェアしてね!
  • URLをコピーしました!
目次