HTML:Div要素を親要素の上下左右の真ん中とか左右の真ん中に持ってくるだけ(なのに苦労する)【中央寄せ/左右中央寄せ】

何度やってるんだろうって思うけど、一番簡単なのはこれでいいはず.
子要素のdivをセンタリング、中央寄せをする方法をコピペできる状態にしておく.

display:flexを親、中を真ん中にする

display:flexと、justify-content:centerとalign-items:centerを設定すれば完了.簡単.
親要素に設定しているflex-parentクラスが本質で他のparent-just-for-visやchild-just-for-visは見やすくするためだけのクラスなので何でもよい.

旧方式 table構造にしてvertical-align:middleする

これは多分ややこしくなるからやめた方がいい. でも一応書いておく. tableタグ使うと基本ややこしいからいつも使わない.

この方法では、縦方向/上下方向の中央寄せをvertical-align:middleで実現したがために外側にtable-cellのdisplayにしたdivを置いている. また左右の中央寄せは中の子要素のmargin:autoで実現している.

ただ単に左右真ん中にする(margin:auto)

また、上記のmargin:autoさえあれば、上下中央寄席は無視して、左右中央寄せは簡単に実現できる.

今回は子要素にmargin:autoを指定するだけ

またdisplay:flexとjustify-content:centerだけでも左右中央寄せは実現できる.もしこれがやりたい場合は、親要素に上記二つのクラスを設定するだけ

About the author

コメントを残す