CSS ページ レイアウトのnotes_html/css_WEB-ITnose

中央揃えのレイアウト

水平方向の中央揃え

親要素と子要素の幅は両方とも不明

inline-block + text-ailgn

.child{display:inline-block;}.parent{text-align:center;}    

長所: 互換性が良い
短所: 子要素の text は text-align 属性を継承し、子要素追加の追加が必要 text-align:left;

table + margin

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

利点: 子要素のスタイルを設定するだけで済みます

Absolute +Transform

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

利点: 子要素を中央揃えにしても他の要素に影響を与えません
欠点: 変換は CSS3 プロパティであり、互換性の問題があります

flex + justify-content

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

利点: 親要素のスタイルのみを設定する必要があります
欠点: 互換性の問題

flex + margin

.parent{display:flex;}.child{margin:0 auto;}

垂直中央揃え

親コンテナと子コンテナの高さ 不明

table-cell +vertical-align

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

長所: 互換性が良い

絶対 + 変換

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

長所: 子要素が他の要素と干渉しない
短所: 互換性

flex + align-item

.parent{display:flex; align-items:center;}

利点: 親要素のみを設定する必要があります
欠点: 互換性の問題

水平方向と垂直方向の中央揃え

親コンテナと子コンテナの両方の高さは不明です

inline-block +テキスト整列 + 表セル + 垂直整列

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

絶対 + 変換

.parent{position:relative;}.child{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

flex + justify-content + align-item

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