CSSでHTML要素を上下左右の中央に配置する方法

当ページのリンクには広告が含まれています。
  • URLをコピーしました!
生徒

WEBページでHTML要素を中央にうまく配置できないです

先生

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

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

HTMLやCSSを理解して中央に配置する

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

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

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

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

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

現在のHTMLの仕様”HTML Standard“ではインライン要素、ブロック要素の定義は無くなり、コンテンツカテゴリーという定義に変わっています。

ただ、現在の仕様でもdisplayプロパティの定義や性質はほぼ同じです。(display: inline;display: block;の定義も同じままです。)

子要素を水平方向の中央に配置する

子要素を水平方向の中央に配置したい場合、子要素がインライン要素ブロック要素かでCSSが変わります。

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

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

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

pタグはブロック要素

勘違いしやすい点の1つとして、文章によく使うpタグは、インライン要素ではなくブロック要素です。

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

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

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

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

子要素にmargin: 0 auto; を指定する

子要素display: block;の場合は、子要素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;の要素(インライン要素)の場合

子要素にvertical-align: middle;を指定する

インライン要素内の子要素にvertical-align: middle;を指定すると、親要素の縦方向の中央に配置されます。

親要素がブロック要素(display: blockinline-blockなど)の場合は、子要素にvertical-align: middle;を指定しても効きません。

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

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

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

親要素にdisplay: table;子要素にdisplay: table-cell; を指定する

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

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

display: inline-block;vertical-align: middle;

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

縦横両方の中央に配置する

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

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

親要素にdisplay: flex;と、子要素を水平方向中央寄せにするjustify-content: center;、子要素を垂直方向中央寄せにするalign-items: center;を指定すると、子要素が上下左右が中央に配置されます。

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

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

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

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

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

  • 親要素position: relative;、子要素にposition: absolute;を指定する。(親要素の位置を基にして、子要素の位置を指定できるようにする。
  • 子要素top: 50%;left: 50%;を指定する。(子要素の左上隅の位置を親要素の上下中央にする。
  • 子要素に translateX(-50%);と translateY(-50%); を指定する。(子要素の位置を、自分のサイズの半分だけ上と左にずらす。)
よかったらシェアしてね!
  • URLをコピーしました!
目次