CSS中心のレイアウトの概要

中央揃えのレイアウト

デモ

1. 水平中央揃え

1> inlink-block+text-align

2> オプション 2 table+margin

.child {display:table; margin:0 auto;}

利点: のみ子 (自分自身) を設定する必要があります

3> オプション 3 絶対+変換

.parent {position:relative;}

.child {position:absolute;left:50%;transform:translateX(-50%);}

利点: 子要素は他の要素に影響を与えません

欠点: 互換性の問題

4 > ; オプション 4 flex+justify-content

.parent {display:flex;justify-content:center;}

利点:親ノード

を設定するか、

.parent {display:flex;}

.Child {margin: 0 auto;} 欠点: Flex の低バージョン IE は、垂直

1 & gt をサポートしません。 ; スキーム Table-Cell+Vertical-Align

.parent {Display: Table-Cell ;vertical-align:middle;}

利点: 親ノードを設定するだけで済み、互換性が良い

2>

.parent {position:relative;}

. child {position:absolute;top :50%;transform:translateY(-50%);}

flex + align を使用-アイテムの ‐ ‐ ‐ ‐ ‐ ‐ .parent {display:flex;align-items:center;}

利点: 親ノードを設定するだけで済みます

欠点: 互換性の問題

3. 1> オプション 1 inline-block+text- align+table-cell+vertical-align

.parent {text-align:center;display:table-cell;vertical-align:middle;}

.child {display:inline-block; } 2＆gt;