ホームページ > 記事 > ウェブフロントエンド > 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 の最新バージョンでテストされ、合格しています。
比較表:
垂直方向のセンタリングを実現する方法は他にもあり、それぞれに独自の利点があります。どのテクノロジーが使用されるかは、ブラウザーがそのテクノロジーをサポートしているかどうか、および使用する言語タグによって異なります。この比較表は、ニーズに基づいて適切な選択をするのに役立ちます。
テクニック |
ブラウザサポート |
レスポンシブ |
オーバーフロー |
サイズ変更:両方 |
高さ可変 |
主要な注意事項 |
絶対センタリング |
モダン&IE8+ |
はい |
スクロール、コンテナをオーバーフローする可能性があります |
はい |
はい* |
高さ可変ではありません 完璧なクロスブラウザ |
マイナスマージン |
すべて |
|
スクロール |
サイズは変更されますが、変更されません中央に留まらないでください |
いいえ |
応答しない、マージンを手動で計算する必要があります |
はい | スクロール、コンテナがオーバーフローする可能性がありますぼやけたレンダリング |
|||||
テーブルセル |
モダン&IE8+ |
はい |
コンテナを展開します | いいえ
|
モダン、IE8+ & IE7* |
はい |
コンテナを展開します いいえ |
はい | コンテナ、ハッキーなスタイルが必要 |
Flexbox |
モダン&IE10+ |
はい |
|
スクロールするとコンテナからはみ出す可能性があります はい |
はい |
コンテナー、ベンダープレフィックスが必要です |
説明: | 上記の説明により、アブソリュートセンタリングの動作メカニズムが説明できます。以下の通り:1. 通常のコンテンツ フロー (通常のコンテンツ フロー) では、margin: auto 効果は margin-top:0;margin-bottom:0 と同等です。 W3C は、「margin-top」または「margin-bottom」が「auto」の場合、使用される値は 0. | 2 であると書き込みます。position:absolute により、絶対位置決めブロックがコンテンツ フローから飛び出ます。絶対に配置された部分は、残りの部分がレンダリングされるときにレンダリングされません。
Developer.mozilla.org:...絶対的に配置された要素はフローから取り出されるため、 up no space 3. 上: 0; 左: 0; 右: 0; を設定すると、この時点で、ブロックはその親要素のすべてを埋めます。 、親要素は通常、position:relative; として宣言された本体またはコンテナです。 |
Developer.mozilla.org:絶対的に配置された要素の場合、上、右、下、左のプロパティでオフセットを指定します
4. コンテンツ ブロックに高さまたは幅を設定すると、コンテンツ ブロックがすべての使用可能なスペースを占有することがなくなり、ブラウザーに新しい境界ボックスを調整するよう求められることがあります。新しい境界ボックスに従って、margin:auto Developer.mozilla.org を再計算します。[absolutely located] 要素のマージンは、これらのオフセットの内側に配置されます。 |
以上がCSS 絶対位置決めおよびセンタリング技術の長所と短所の詳細なチャートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。