CSSだけで完全な中央揃えを実現する方法

これまで、margin:0 auto;は要素を水平方向にセンタリングできるのに対し、margin: auto;は垂直方向にセンタリングできないことが知られていました。しかし、注意してください！要素を絶対的に中央に配置するために必要なことは、要素の高さを宣言し、それに次のスタイルを追加することです：

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

この方法を使ったことがなかったので、試してみて、この "フル・センター "メソッドが本当に素晴らしいものなのか確かめたかったのです。 メリット

• クロスブラウザ、互換性
• 特別なマーキングはなく、より合理的なスタイル
• 適応レイアウト、パーセンテージや***最小高さと幅のようなスタイルを使用することができます。
• 要素のパディング値は、中央揃えの際に考慮されません。
• レイアウトブロックのサイズを自由に変更可能
• imgのイメージも使用できます。

また、注意してください：

• 要素の高さを宣言する必要があります。
• overflow:auto;スタイルを設定することを推奨します。
• この方法はWindows Phoneでは使えません

ブラウザサポート：Chrome、Firefox、Safari、Mobile Safari、IE8-10。「フルセンタリング」はテスト済みで、Chrome、Firefox、Safari、Mobile Safariの***バージョンに適用できます。また、IE8~IE10でも動作します！

比較表

"完全センタリング "は、この記事の唯一の選択肢ではありません。垂直方向の中央揃えを実現する方法は他にもあり、それぞれに利点があります。どの方法を取るべきかは、サポートしているブラウザや既存のタブの構造によって異なります。必要な方法を選ぶのに役立つ比較表があります。

指示

仕様書とドキュメントを検討した結果、"フルセンター "が機能するという結論に達しました：

full centre "の使用は、意図的に標準のmargin: auto;スタイルのレンダリングに従っているため、標準と互換性のあるすべてのブラウザで動作するはずです。

#p#

整列

コンテナ内アライメント

full centre "を使うと、コンテナ内の要素をposition: relativeで完全に中央に配置することができます！

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

次の例では、以下のスタイルがすでに含まれていると仮定し、スタイルを追加するためのステップバイステップのアプローチでさまざまな機能を提供します。

視聴エリアの中心

コンテンツ領域を表示領域の中央に配置したいですか？position:fixedスタイルを設定し、z-indexの値を大きく設定するとうまくいきます。

.Absolute-Center.is-Fixed { 
  position: fixed; 
  z-index: 999; 
} 

モバイルSafariでの注意事項：コンテナのレイヤーの外側にposition: relativeが設定されていない場合、コンテンツエリアは可視エリアの高さの中心ではなく、ドキュメント全体の高さの中心に配置されます。

オフセット値

固定ヘッダーや、オフセット・スタイルを持つ他の要素を追加する必要がある場合、コンテンツ・エリアのスタイルに直接top: 70px;のように記述することができます。margin: auto;スタイルが宣言されると、コンテンツ・ブロックのtopleftbottomright属性の値も計算されます。

コンテンツ・ブロックが横を向くように水平方向の中央を保ちたい場合は、right: 0; left: auto;を使ってコンテンツを右に寄せ、left: 0; right: auto;を使ってコンテンツを左に寄せます。

.Absolute-Center.is-Fixed { 
  position: fixed; 
  z-index: 999; 
} 

レスポンシブ

absoluteを使用する***利点***は、%でwidth/heightスタイルを使用できることです！min-width/max-widthやmin-height/max-heightでさえも、期待通りに振る舞うことができます。

パディングスタイルを追加しても、完全な中央揃えという絶対的なスタイルはまったく崩れません！

.Absolute-Center.is-Responsive { 
  width: 60%; 
  height: 60%; 
  min-width: 200px; 
  max-width: 400px; 
  padding: 40px; 
} 

#p#

オーバーフローコンテンツ

高さが可視領域よりも大きいコンテンツ領域や、 position: relative を持つコンテナは、そのコンテンツがコンテナからはみ出したり、コンテナによって切り捨てられたりする可能性があります。内容領域がコンテナからはみ出さない限り、スクロールバーはコンテナ内に生成されます。

.Absolute-Center.is-Overflow { 
  overflow: auto; 
} 

サイズ調整可能

手動で再計算することなく、他のスタイルやJavaScriptを使用してコンテンツ領域のサイズを変更することも可能です！リサイズスタイルが設定されている場合、ユーザーが自分でコンテンツエリアのサイズを調整することもできます。 完全中央揃え」メソッドは、どのようにサイズが変更されても、コンテンツ領域の中央揃えを維持します。

min-/max-で始まるプロパティを設定することで、コンテナの破裂を心配することなく、ブロックのサイズを制限することができます。

.Absolute-Center.is-Resizable { 
  min-width: 20%; 
  max-width: 80%; 
  min-height: 20%; 
  max-height: 80%; 
  resize: both; 
  overflow: auto; 
} 

resize: both スタイルを設定しない場合は、transition スタイルを設定してサイズをスムーズに切り替えることができます。サイズ変更後は、コンテナの高さと幅がコンテンツの高さと幅よりも小さくなる可能性が高いため、overflow: auto スタイルを設定することを常に忘れないでください。 full centred" メソッドは、resize: both スタイルの使用をサポートする唯一のメソッドです。

使用上の注意

• そうしないと、コンテナがオーバーフローしてしまう危険性があります。
• resize属性は、モバイルブラウザやIE8-10ではサポートされていませんので、ユーザーエクスペリエンスを重視するのであれば、ユーザーがサイズを変更できる別の方法を用意してください。
• リサイズ スタイルとトランジションを同時に使用すると、ユーザーがサイズの変更を開始したときに、トランジション効果の持続時間と同じ遅延が発生します。

イメージ

イメージも同様です！適切なクラスを指定し、スタイル height: auto; を指定すれば、コンテナに合わせてサイズが変化するレスポンシブなイメージが得られます。

height: auto; スタイルは、イメージには有効ですが、後で説明する「可変高さのトリック」を使用しないと、コンテナの長さに合わせて通常のコンテンツ領域が細長くなることに注意してください。

ブラウザはレンダリング結果に基づいてイメージの高さ値をパディングしている可能性が高いため、margin: auto; スタイルは、テストしたブラウザでは、高さの固定値が宣言されているかのように正常に動作します。

HTML。

<img src="http://.com/g/500/002" alt="" /> 

CSSです。

.Absolute-Center.is-Image { 
  height: auto; 
} 
  
.Absolute-Center.is-Image img { 
  width: 100%; 
  height: auto; 
} 
 
  

#p#

可変高さ

完全中央揃え」メソッドでは、コンテナの高さを宣言する必要がありますが、高さは max-height スタイルの影響を受けます。これは、レスポンシブシナリオでオーバーフローコンテンツを設定する必要がある場合に最適です。

もう一つの方法は、コンテンツの長さに関係なく、display: tableスタイルを中央揃えに設定することです。この方法は、ブラウザによっては問題を引き起こす可能性があります。私の友人であるELL CreativeのKalleyが、Modernizrをベースにしたテストを書いてくれました。この方法は現在、段階的に強化することができます。

注意点: この方法ではブラウザの互換性が損なわれます。Modernizrのテストが要件を満たさない場合は、別の実装を検討する必要があるかもしれません。

• サイズ変更可能な技術との互換性なし
• Firefox/IE8でdisplay: tableを使用すると、コンテンツエリアは縦に表示され、横には中央に表示されます。
• IE9/10でdisplay: tableを使用すると、コンテンツエリアが左上隅まで表示されます。
• コンテンツエリアはモバイルSafariでは水平に整列されますが、パーセンテージ幅を使用した場合は水平方向の中央からわずかにずれます。

ジャバスクリプト

/* Modernizr Test for Variable Height Content */ 
Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) { 
  Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop); 
}); 

CSSです。

.absolutecentercontent .Absolute-Center.is-Variable { 
  display: table; 
  height: auto; 
} 

負のマージン値

これは最も一般的な方法でしょう。各要素のサイズがわかっている場合、幅と高さの半分に等しい負のマージン値を設定し、top: 50%; left: 50%; スタイルと組み合わせると、ブロック要素が中央に配置されます。

IE6-7でも期待通りに動作する唯一の方法であることに注意してください。

.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-7もサポート
• コーディングはほとんど不要

また、注意してください：

• これは応答性のないメソッドで、パーセンテージ・サイズを使用したり、最小/最大 *** 値の最小値を設定したりすることはできません。
• 内容物が容器からはみ出ることがあります。
• パディング用にスペースを確保するか、box-sizing: border-boxスタイルを使用する必要があります。
• #p#

トランスフォーム法

完全中央揃え」の利点と同様に、シンプルで効果的で、高さの可変に対応しています。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%); 
} 

メリット

• 可変コンテンツの高さ
• 少ないコード量

また、注意してください：

• IE8には対応していません
• ベンダープレフィックスを記述する必要があります
• は他の変換スタイルと衝突します。
• エッジとフォントのレンダリングに問題がある場合があります。

テーブルセル方式

高さはコンテンツで変更でき、ブラウザのサポートも悪くないので、これはおそらく****な方法でしょう。主な欠点は、余分なタグが作成されることです。中央揃えが必要な各要素に対して、3つの余分なHTMLタグが作成されます。

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

メリット

• 可変コンテンツの高さ
• コンテンツのオーバーフローは、自動的に親要素の高さをサポートします。
• 優れたブラウザ互換性

また、注意してください：

• 追加のHTMLタグが必要です

インラインブロック法

コンテンツ領域の宣言は、コンテナの100%から0.25emを引いた幅を超えることはできません。これは、長いテキストを持つセクションのようなものです。そうでなければ、コンテンツ領域は一番上に押し出されてしまうので、:after擬似クラスが使われるのです。一方、: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+ */ 

メリット

• 可変コンテンツの高さ
• コンテンツのオーバーフローは、自動的に親要素の高さをサポートします。
• IE7をサポートするように調整された、良好なブラウザ互換性

また、注意してください：

• 追加コンテナの必要性
• 水平方向の中央揃えは、margin-left: -0.25emのスタイルに依存します。
• コンテンツ領域宣言の幅は、コンテナの100%から0.25emを引いた値より大きくすることはできません。

#p#

Flexbox

CSSの進むべき道は、Flexboxのようなデザインを使って、縦方向の中央揃えなどのよくある問題を解決することです。Flexboxを中央揃えにする方法は1つだけではありません。Flexboxは列を分割したり、奇妙なレイアウトの問題を解決したりするのにも使えます。

.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には対応していません。

• ボディにスタイルを書く必要がある場合、または追加の容器が必要な場合
• モダンブラウザと互換性のある様々なベンダープレフィックスが必要です。
• パフォーマンス上の問題が発生する可能性があります。

*** 推奨

それぞれの手法にはそれぞれの利点があり、サポートするブラウザや既存のタブの構造によって取るべきアプローチは異なります。上記の比較表を参考に、必要なアプローチを選んでください。

フル・センター "方式はシンプルで簡単、かつ迅速です。以前はマイナスのマージン値を使用していましたが、絶対センタリングを使用することができます。面倒な計算や余分なラベルは不要で、サイズはいつでも変更できます。

サイトが可変の高さのコンテンツを必要とし、同時にブラウザの互換性にも気を配るのであれば、table-cell や inline-block テクノロジーを試すことができますし、何か新しいことを試したいのであれば、Flexbox を使用して、この高度なテクノロジーの利点を享受することができます。