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 の最新バージョンでテストされ、合格しています。

比較表:

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

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