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

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

水平方向の中央寄せ

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

子要素がdisplay: inline;の要素（インライン要素）の場合

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

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

See the Pen text-align 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.