CSS 絶対位置決めおよびセンタリング技術の長所と短所の詳細なチャート

絶対センタリングテクノロジー

水平方向のセンタリングを実現するために margin:0 auto をよく使用しますが、margin:auto では垂直方向のセンタリングを実現できないと常に考えています...実際、垂直方向のセンタリングを実現するには、要素の高さを宣言するだけで済みます。下の CSS:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

利点:

1. IE8-IE10 を含むクロスブラウザーをサポートします。

2. 他の特別なタグは必要なく、CSS コードの量が少なくなります

3. パーセント% 属性値と最小値をサポートします。 /max- プロパティ

4. このクラスは、コンテンツ ブロックの中央揃えを実現するためにのみ使用します

5. パディングが設定されているかどうかに関係なく (box-sizing 属性を使用せずに) 中央に配置できます

6.再描画することができます。

7. 画像のセンタリングを完全にサポートします。

欠点:

1. 高さを宣言する必要があります (「可変高さ」を参照)。

2. コンテンツが範囲外に溢れるのを防ぐために、overflow:auto を設定することをお勧めします。 (オーバーフローを参照)。

3. Windows Phone デバイスでは動作しません。

ブラウザの互換性:

Chrome、Firefox、Safari、Mobile Safari、IE8-10。

絶対位置決め方法は、Chrome、Firefox、Safari、Mobile Safari、IE8-10 の最新バージョンでテストされ、合格しています。

比較表:

垂直方向のセンタリングを実現する方法は他にもあり、それぞれに独自の利点があります。どのテクノロジーが使用されるかは、ブラウザーがそのテクノロジーをサポートしているかどうか、および使用する言語タグによって異なります。この比較表は、ニーズに基づいて適切な選択をするのに役立ちます。

モダン&IE9+スクロール、コンテナがオーバーフローする可能性がありますYesYesいいえ上記の説明により、アブソリュートセンタリングの動作メカニズムが説明できます。以下の通り:2 であると書き込みます。position:absolute により、絶対位置決めブロックがコンテンツ フローから飛び出ます。絶対に配置された部分は、残りの部分がレンダリングされるときにレンダリングされません。 5.通常のコンテンツ フローでは、ブラウザーは margin-top と margin-bottom に同じ値を与え、以前に定義された境界内の要素のブロックを中央に配置します。

テクニック	ブラウザサポート	レスポンシブ	オーバーフロー	サイズ変更:両方	高さ可変	主要な注意事項
絶対センタリング	モダン&IE8+	はい	スクロール、コンテナをオーバーフローする可能性があります	はい	はい*	高さ可変ではありません 完璧なクロスブラウザ
マイナスマージン	すべて		スクロール	サイズは変更されますが、変更されません中央に留まらないでください	いいえ	応答しない、マージンを手動で計算する必要があります
はい				ぼやけたレンダリング
テーブルセル	モダン&IE8+	はい	コンテナを展開します		モダン、IE8+ & IE7*	はい
コンテナを展開します いいえ	はい	コンテナ、ハッキーなスタイルが必要		Flexbox	モダン&IE10+	はい
スクロールするとコンテナからはみ出す可能性があります はい	はい	コンテナー、ベンダープレフィックスが必要です	説明:	1. 通常のコンテンツ フロー (通常のコンテンツ フロー) では、margin: auto 効果は margin-top:0;margin-bottom:0 と同等です。 W3C は、「margin-top」または「margin-bottom」が「auto」の場合、使用される値は 0.	Developer.mozilla.org:...絶対的に配置された要素はフローから取り出されるため、 up no space 3. 上: 0; 左: 0; 右: 0; を設定すると、この時点で、ブロックはその親要素のすべてを埋めます。 、親要素は通常、position:relative; として宣言された本体またはコンテナです。	Developer.mozilla.org:絶対的に配置された要素の場合、上、右、下、左のプロパティでオフセットを指定します 4. コンテンツ ブロックに高さまたは幅を設定すると、コンテンツ ブロックがすべての使用可能なスペースを占有することがなくなり、ブラウザーに新しい境界ボックスを調整するよう求められることがあります。新しい境界ボックスに従って、margin:auto Developer.mozilla.org を再計算します。[absolutely located] 要素のマージンは、これらのオフセットの内側に配置されます。

W3.org: 3 つの [top、bottom、height] のどれも 'auto' でない場合: 'margin-top' と 'margin-bottom' の両方が 'auto' の場合、 2 つのマージンが等しい値を取得するという追加の制約の下で方程式を作成します。別名: ブロックを垂直方向に中央に配置します

margin:auto は絶対センタリング (Absolute Centering) 用に設計されているようです。そのため、絶対センタリング (Absolute Centering) は最新のものと互換性があるはずです。標準に準拠したブラウザ。

要するに (TL;DR): 絶対に配置された要素は通常のコンテンツ フローではレンダリングされないため、margin:auto は、top: 0、bottom: 0; によって設定された境界内にコンテンツを作成できます。 ; 内側に垂直方向に中央揃え。

以上がCSS 絶対位置決めおよびセンタリング技術の長所と短所の詳細なチャートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。