何度やってるんだろうって思うけど、一番簡単なのはこれでいいはず.
子要素の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だけでも左右中央寄せは実現できる.もしこれがやりたい場合は、親要素に上記二つのクラスを設定するだけ
