CSS で中央揃えのスタイルを実装するためのいくつかの手法の長所と短所の詳細な説明

マイナスマージン

これはおそらく現時点で最も人気のある使用方法です。ブロック要素のサイズがわかっている場合は、次の方法でコンテンツ ブロックをコンテナ内の中央に配置できます:

外側のマージンに負の数値をとり、サイズは幅/高さの半分になります (ボックスのパディングを含む) -サイズ設定: ボーダーボックスは使用されません)、プラス上: 50%、左: 50%;。つまり:

.is-Negative {  
        width: 300px;  
        height: 200px;  
        padding: 20px;  
        position: absolute;  
        top: 50%; left: 50%;  
        margin-left: -170px; /* (width + padding)/2 */  
        margin-top: -120px; /* (height + padding)/2 */  
}

テストの結果、これが IE6 ～ IE7 でも適切に動作する唯一の方法であることがわかりました。

利点:

1. IE6-IE7と互換性のある優れたクロスブラウザー機能。

2. コードの量が少ない。

短所:

1. 適応性がありません。サイズのパーセントおよび最小/最大プロパティ設定はサポートされていません。

2.内容物が容器から溢れる可能性があります。

3. 余白のサイズは、パディングと box-sizing: border-box が定義されているかどうかに関係し、さまざまな状況に基づいて計算する必要があります。

変形

これは、絶対中心化と同じ効果を達成できる最も単純な方法であり、ジョイント可変高さ方法の使用もサポートしています。コンテンツブロック定義のtransform:translate(-50%,-50%)には、ブラウザメーカーのプレフィックスに加えて

top:50%; left:50%;

コードタイプ:

.is-Transformed {   
  width: 50%;  
  margin: auto;  
  position: absolute;  
  top: 50%; left: 50%;  
  -webkit-transform: translate(-50%,-50%);  
      -ms-transform: translate(-50%,-50%);  
          transform: translate(-50%,-50%);  
}

利点:度1が必要です。コンテンツの高さを変更できます 内容 2. コード量が少ない

欠点:

1. IE8 はサポートしていません

2. 属性にはブラウザーの製造元のプレフィックスを記述する必要があります

3. 他の変換効果を妨げる可能性があります

4.場合によっては、テキストまたは要素の境界のレンダリングがぼやけて見えることがあります

変換の実装とセンタリングの詳細については、CSS トリックの記事「PercentageWidth/Height 要素のセンタリング」を参照してください

Table-Cell

一般に、コンテンツ ブロックの高さは実際のコンテンツの高さに応じて変化し、ブラウザーの互換性も良好であるため、これがおそらく中央揃えを実現する最良の方法です。最大の欠点は、多くの追加のマークアップが必要となり、最も内側の要素を中央に配置するには 3 層の要素が必要になることです。 HTML:

<div class="Center-Container is-Table">  
  <div class="Table-Cell">  
    <div class="Center-Block">  
    <!-- CONTENT -->  
    </div>  
  </div>  
</div>

CSS:

.Center-Container.is-Table { display: table; }  
.is-Table .Table-Cell {  
  display: table-cell;  
  vertical-align: middle;  
}  
.is-Table .Center-Block {  
  width: 50%;  
  margin: 0 auto;  
}

利点:

1. 高さ変数

2. コンテンツのオーバーフローは親要素を展開します。

3. 優れたブラウザー間互換性。

欠点:

追加のHTMLタグが必要

12.インラインブロック

センタリングを実現するための基本的なアイデアは、display: inline-block、vertical-align : middle、および疑似-を使用することです。要素はコンテナ内のコンテンツ ブロックの中央に配置されます。 コンテンツ ブロックの幅がコンテナの幅より大きい場合、たとえば長いテキストが配置される場合、コンテンツ ブロックの幅はコンテナの 100% から 0.25em を引いた値を超えることはできません。それ以外の場合は、擬似element: を使用すると、コンテンツ ブロックがコンテナの上部に押し込まれ、 :before を使用すると、コンテンツ ブロックが 100% 下にオフセットされます。

コンテンツ ブロックができるだけ多くの水平スペースを占める必要がある場合は、max-width: 99% (大きなコンテナの場合) または max-width: calc(100% -0.25em) (サポートされているブラウザーとコンテナの幅)。

HTML:

<div class="Center-Container is-Inline">  
  <div class="Center-Block">  
    <!-- CONTENT -->  
  </div>  
</div>

CSS:

.Center-Container.is-Inline {   
  text-align: center;  
  overflow: auto;  
}  
  
.Center-Container.is-Inline:after,  
.is-Inline .Center-Block {  
  display: inline-block;  
  vertical-align: middle;  
}  
  
.Center-Container.is-Inline:after {  
  content: '';  
  height: 100%;  
  margin-left: -0.25em; /* To offset spacing. May vary by font */  
}  
  
.is-Inline .Center-Block {  
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */  
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */   
}

この方法の長所と短所は、Table-Cell 方法と似ています。これは確かにハック方法であるため、最初は無視しました。ただし、これは非常に一般的な使用法であり、ブラウザーで十分にサポートされています。

利点:

1. 可変の高さ

2. コンテンツのオーバーフローにより親要素が拡張されます。

3. クロスブラウザをサポートし、IE7 にも適しています。

短所:

1. コンテナが必要です

2. 水平方向の中央揃えは、マージン左に依存します: -0.25em; このサイズは、さまざまなフォント/フォント サイズに合わせて調整する必要があります。

3. コンテンツ ブロックの幅はコンテナの 100% (0.25em) を超えることはできません。

Flexbox

これは CSS レイアウトの将来のトレンドです。 Flexbox は CSS3 の新しい属性で、元々は垂直方向の中央揃えなどの一般的なレイアウトの問題を解決するために設計されました。 Flexbox は中央揃えのためだけではなく、列を分割したり、奇妙なレイアウトの問題を解決したりするためにも使用できることを覚えておいてください。

利点: 1. コンテンツブロックの幅と高さは任意であり、適切にオーバーフローできます。

2. より複雑で高度なレイアウト手法で使用できます。

欠点:

1. IE8/IE9 はサポートされていません。

2. 本文には特定のコンテナと CSS スタイルが必要です。

3. 最新のブラウザで実行されるコードには、ブラウザのベンダー プレフィックスが必要です。

4. パフォーマンス上の問題が発生する可能性があります

提案:

各テクノロジーには長所と短所があります。どのテクノロジーを選択するかは、サポートされているブラウザーとコーディングによって異なります。決定には上記の比較表を使用してください。

簡単な代替方法として、絶対センタリング技術がうまく機能します。以前は負のマージンを使用していましたが、代わりに絶対センタリングを使用できるようになりました。煩わしいマージン計算や余分なマークアップに対処する必要がなくなり、コンテンツ ブロックのサイズを変更したり中央揃えにすることもできます。

サイトで高さが可変のコンテンツが必要な場合は、テーブルセルとインラインブロックの 2 つの方法を試すことができます。出血しそうになっている場合は、Flexbox を試して、この高度なレイアウト テクノロジの利点を体験してください。

以上がCSS で中央揃えのスタイルを実装するためのいくつかの手法の長所と短所の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。