CSS を完全にセンタリングするための 6 つのベスト プラクティス (整理)_html/css_WEB-ITnose

2016 年 4 月 28 日

1. 最良の方法:

.Absolute-Center {          width: 50%;          height: 50%;          overflow: auto;          margin: auto;          position: absolute;          top: 0; left: 0; bottom: 0; right: 0;          background-color: red;        }

オンラインデモ

1. 通常のドキュメントフローでは、margin: auto は要素の margin-top と margin-bottom を設定することを意味します。 0.

   
   W3.org:?「margin-top」または「margin-bottom」が「auto」の場合、使用される値は 0 です。
   

2. position:Absolute が設定された要素はブロック要素となり、ブロック要素から切り離されます。通常の書類の流れ。ドキュメントの残りの部分は通常どおりレンダリングされ、要素は元の位置にないように見えます。

   
   Developer.mozilla.org:?…絶対に配置された要素はフローから削除されるため、スペースを占有しません
   

   上: 0; 下: 0;スタイル付きブロック要素を使用すると、ブラウザーはその要素を囲むように新しいボックスを囲むため、この要素はその相対親要素の内部スペースを埋めることになります。この相対親要素は、body タグ、または、position:relative スタイル コンテナーを持つ要素になります。
3. Developer.mozilla.org:?絶対に配置された要素の場合、上、右、下、左のプロパティは、要素を含むブロックの端からのオフセット (要素が相対的に配置される位置) を指定します。

   
   
   

   give element幅と高さを設定した後、ブラウザは要素がすべてのスペースを埋めるのを防ぎ、margin: auto; の要件に従って要素を再計算し、新しいボックスで要素を包みます。
Developer.mozilla.org:?[絶対に配置された] 要素のマージンは、これらのオフセットの内側に配置されます。

4. 
   

   ブロック要素は絶対に配置され、通常のドキュメント フローから分離されているため、ブラウザは Will の前にボックスをラップします。 margin-top と margin-bottom に同じ値を設定します。
W3.org:?3 つの [top、bottom、height] のいずれも 'auto' でない場合: 'margin-top' と 'margin-bottom' の両方が 'auto' の場合、追加の制約の下で方程式を解きます。 2 つのマージンは等しい値を取得します。別名: ブロックを垂直方向に中央揃えにします

5. 
   

   「完全に中央揃え」を使用すると、標準の margin: auto; スタイルのレンダリング規則に意図的に準拠するため、標準の と互換性のあるさまざまなブラウザで動作するはずです。

利点:

クロスブラウザ、優れた互換性 (ハック不要、IE8~IE10を考慮可能)

特別なタグなし、より合理化されたスタイル

適応型レイアウト、パーセンテージと最大および最小の高さを使用できると幅のスタイル

センタリングの際に要素のパディング値は考慮されません（ボックスサイズ変更スタイルを使用する必要もありません）

レイアウトブロックのサイズを自由に調整できます

img画像も使用できます

次の点にも注意してください:

要素の高さを宣言する必要があります

要素のオーバーフローや異常な表示の問題を回避するには、overflow:auto; スタイルを設定することをお勧めします

この方法は Windows Phone では機能しません

2. ネガティブマージンメソッド:

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

オンラインデモンストレーション

3.transformメソッド:

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

オンラインデモンストレーション

4.内部ブロックメソッド:

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+ */ }

オンラインデモ

5. フレックスボックスメソッド:

.Center-Container.is-Flexbox {  display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;  -webkit-box-align: center;     -moz-box-align: center;     -ms-flex-align: center;  -webkit-align-items: center;          align-items: center;  -webkit-box-pack: center;     -moz-box-pack: center;     -ms-flex-pack: center;  -webkit-justify-content: center;          justify-content: center;}

オンラインデモ

利点:

コンテンツの高さと幅は任意で、オーバーフローすることもできます。パフォーマンスも良好です

さまざまな高度なレイアウト手法に使用できます

また注意: IE8-9

をサポートしません

また注意:

本文にスタイルを記述するか、追加のコンテナが必要です

さまざまなベンダーが必要です最新のブラウザと互換性を持たせるための接頭辞

潜在的なパフォーマンスの問題がある可能性があります

6.テーブルセルメソッド:

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;}

Onlineデモ

参照元:

CodePen of shshaw

Bole Online