生徒WEBページでHTML要素を中央にうまく配置できないです
先生CSSで要素を中央に配置する方法について説明します
HTMLやCSSを理解して中央に配置する
WEBページで要素を中央に配置したい場面はよくありますが、CSSを正しく理解していないと、上手く配置できずに手間取ってしまうことがあります。
この記事では、CSSで要素を中央に配置する方法について説明します。
HTMLの要素は、以前はインライン要素とブロック要素として以下のように定義されていました。
現在のHTMLの仕様”HTML Standard“ではインライン要素、ブロック要素の定義は無くなり、コンテンツカテゴリーという定義に変わっています。
ただ、現在の仕様でもdisplayプロパティの定義や性質はほぼ同じです。(display: inline;、display: block;の定義も同じままです。）
ポチップ
子要素を水平方向の中央に配置する
子要素を水平方向の中央に配置したい場合、子要素がインライン要素かブロック要素かでCSSが変わります。
子要素がdisplay: inline;（インライン要素）の場合
親要素にtext-align: center;を指定する
子要素がdisplay: inline;の場合、親要素にtext-align: center;を指定すると、子要素が親要素の水平方向中央に配置されます。
勘違いしやすい点の1つとして、文章によく使う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; を指定すると、親要素の水平方向の中央に配置できます。
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: inline;の要素（インライン要素）の場合
line-height を親要素の高さと同じサイズにする
1行のテキストの場合はline-heightプロパティを親要素のheightと同じ高さにすると垂直方向の中央に配置されます。
親要素にdisplay: table;子要素にdisplay: table-cell; を指定する
display: table-cell; を指定した要素は高さが親要素と同じになるため、vertical-align: middle;も指定すると要素が縦方向の中央に配置されます。
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%); を指定する。（子要素の位置を、自分のサイズの半分だけ上と左にずらす。）
ポチップ