メモ:margin: auto;でのセンター寄せ
inline要素には使えない
中央に寄せたい block要素自身に指定する
test1.html
① pタグに width を指定しないと効果がない
② width と height が指定された .child だと、横方向だけは中央に寄った
③ positionプロパティと組み合わせると上下も中央に寄る
- 絶対配置(position: absolute;)指定要素を中央に寄せる条件
横方向の場合
- left、width、right の値が、「 auto以外 」
- margin-left、margin-right の値が、「 auto 」
縦方向の場合
- top、height、bottom の値が、「 auto以外 」
- margin-top、margin-bottom の値が、「 auto 」
- 以上の条件がそろうと、左右、上下それぞれの margin が等しくなるように計算される仕様なのだそう
- 「top:0; bottom:0; left:0; right:0;」は、値を「auto以外」にするために指定する
参考になったサイト
CSS: カスケーディングスタイルシート margin