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



CSSで要素を中央に配置する方法について説明します
- CSSで要素を水平方向や垂直方法の中央に配置する方法
HTMLやCSSを理解して適したCSSを指定する
WEBページを作る時に要素を中央に配置したいことはよくありますが、CSSを正しく理解していないと、上手く中央に配置するのに手間取ってしまうことがあります。
この記事では、CSSで要素を中央に配置する方法について説明します。
HTMLの要素は、以前はインライン要素とブロック要素として以下のように定義されていました。


水平方向の中央寄せ
子要素を水平方向の中央に配置したい場合、以下の方法があります。
子要素が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; を指定すると、親要素の水平方向の中央に配置できます。
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;を指定すると、その要素は縦方向の中央に配置されます。
display: table-cell;
display: table-cell; を指定した要素は高さが親要素と同じになって、vertical-align: middle;を指定すると要素が垂直方向の中央に配置されます。
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.