CSS_html/css_WEB-ITnose のみを使用して完全に中央揃え

margin:0 auto; のスタイルは要素を水平方向に中央に配置できることは誰もが知っていますが、margin: auto; は要素を垂直方向に中央に配置することができません。ただし、ご注意ください！要素を絶対的に中央に配置したい場合は、要素の高さを宣言し、次のスタイルを追加するだけです。 : 絶対 ;

上 : 0 ; 下 : 0 ; 右 : 0 ; ") 、非常に一般的なテクニックかもしれません。しかし、垂直方向のセンタリングに関するほとんどの記事では、この方法について言及していません。この記事のコメントを読んでいなかったら、この方法を見つけることさえできなかったでしょう。

上記の記事のコメント欄で、Simon は jsFiddle へのリンクを提供しましたが、他のメソッドは比較すると見劣りします。 (Priit 氏もコメント欄で同じ方法について言及しています)。詳細な調査を行った結果、特定のキーワードを使用してこの方法を文書化している 3 つの Web サイト (サイト 1、サイト 2、およびサイト 3) を見つけました。 クロスブラウザー、優れた互換性 (ハックは不要、IE8~IE10 を考慮可能) 特別なタグはなく、スタイルはより合理化され、適応性のあるレイアウトになり、パーセンテージ、最大、最小の高さ、幅、その他のスタイルを使用して、要素のパディング値を考慮せずに中央に配置します (box-sizing スタイルを使用する必要はありません)。また、レイアウト ブロックのサイズを自由に調整できます。サポートされているブラウザ

これまでこの方法を使ったことがなかったので、この「完全に中心にある」方法がどれほど魔法であるかを試してみたいと思いました。 利点:

要素を宣言する必要があります。要素のオーバーフローや異常な表示の問題を回避するために、この方法は Windows Phone では動作しません ブラウザのサポート: Chrome、Firefox、Safari、Mobile Safari、IE8-10 で使用されることを強くお勧めします。 「完全に中央揃え」はテスト済みで、Chrome、Firefox、Safari、Mobile Safari の最新バージョンで完全に使用でき、IE8 ～ IE10 でも実行できます 比較表 この記事では「完全に中央揃え」が唯一のオプションではありません。垂直方向のセンタリングを実現するには他にも方法があり、それぞれに独自の利点があります。採用するアプローチは、サポートするブラウザーと既存のタグの構造によって異なります。以下の比較表は、ニーズに最適な方法を選択するのに役立ちます。 使用されるスタイル

レスポンシブかどうか

コンテンツオーバーフロー後のスタイル

両方

変動性が高い は *テーブルセルInline-Block Flexbox説明

仕様とドキュメントを検討した後、「完全中央揃え」の動作原理を要約しました。

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

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

2. Position:Absolute が設定された要素はブロック要素となり、通常の Document から切り離されます。流れ。ドキュメントの残りの部分は通常どおりレンダリングされ、要素は元の位置にないように見えます。 Developer.mozilla.org …絶対に配置された要素はフローから取り出されるのでスペースを取りません

3. 上: 0; 下: 0; を設定します。ブラウザが新しいボックスを囲むようにするため、この要素は相対的な親要素の内部スペースを埋めることになります。この相対的な親要素は、body タグであるか、position:relative スタイルで設定されたコンテナーである可能性があります。 Developer.mozilla.org 絶対的に配置された要素の場合、top、right、bottom、および left プロパティは、要素を含むブロックの端からのオフセット (要素が相対的に配置されるもの) を指定します。

4. 幅と高さを設定します。要素 将来的には、ブラウザは要素がすべてのスペースを埋めることを防ぎ、margin: auto; の要件に従って要素を再計算し、新しいボックスで囲むようになります。 Developer.mozilla.org The margin of the [absolutely located] element is then located inside these offsets.

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

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

コンテナ内の整列 整列

「完全センタリング」を使用すると、position:relative を設定して要素をコンテナ内の完全に中央に配置できます。 (Center-Container {

位置: 相対;

.Absolute-Center {

主な欠陥		Absolute	最新のブラウザと IE8+	はコンテナのオーバーフローを引き起こす可能性があります		の「高さ可変」機能です。クロスではありません-ブラウザ
負のマージン値	すべて	いいえ	スクロールバー付き	サイズ変更後に中央に配置されなくなりました	いいえ	応答性のないフォーミュラの特性、マージン値は手動で計算する必要があります
Transform	最新のブラウザと IE9+	はコンテナのオーバーフローを引き起こします	is	is	障害物のレンダリング
最新ブラウザ&IE8+	はい	オープンコンテナ	いいえ	は	で冗長なマークを追加します
最新のブラウザ&IE8+&IE7*	はい	コンテナを開けます	いいえ	は	コンテナラッピングを使用し、スタイルスタイルをハックする必要があります
最新のブラウザと IE10+	は	はコンテナのオーバーフローを引き起こします	は	は	には、コンテナ パッケージとベンダー プレフィックス (ベンダー プレフィックス) の使用が必要です

幅: 50% ; 高さ: 50 %; .Absolute-Center.is-Fixed {

オーバーフロー: 自動; マージン: 自動; 位置: 絶対; 上: 0; 左: 0; 右: 0; 次の例では、次のスタイルがすでに含まれていることを前提として、さまざまな機能を提供するためにスタイルを追加します。 表示領域内の中央に配置します コンテンツ領域を表示領域内の中央に配置したいですか？これを行うには、position:fixed スタイルを設定し、より高い z-index 値を設定します。

位置: 固定 z-index: 999;

モバイル版 Safari の手順: Position:relative が外側に設定されたコンテナがない場合、コンテンツ領域はドキュメント全体の高さの中心点に基づいて中央に配置されます。表示領域の高さ 中心点はセンタリングの基準になります。

オフセット値

オフセット スタイルを使用して固定タイトルやその他の要素を追加する必要がある場合は、コンテンツ領域のスタイルに top: 70px; のようなスタイルを直接書き込むことができます。 margin: auto; スタイルを宣言すると、コンテンツブロックの左上右下の属性値も同時に計算されます。

コンテンツブロックが横にあるときに水平方向の中央に配置したい場合は、right: 0; left: auto; を使用してコンテンツを右に固定するか、left: 0; を使用します。コンテンツが左側に固定されるようにします。

応答性あり 絶対最大のものを使う 利点それは、幅と高さのスタイルをパーセンテージで完全に使用できることです。 min-width/max-width または min-height/max-height であっても、期待どおりに動作します。

.Absolute-Center.is-Fixed { 位置: 固定 z-index: 999;

さらにパディングスタイルを追加すると絶対センタリングは全く崩れません！

.Absolute-Center.is-Responsive {

幅: 60%

高さ: 60%;

最小幅 : 200px ; 最大幅: 400px ; パディング: 40px;

オーバーフロー : 自動 ;サイズ変更可能 他のスタイルを使用するか、JavaScript を使用してコンテンツ領域のサイズを変更します。手動で再計算する必要はありません。サイズ変更スタイルが設定されている場合、ユーザーはコンテンツ領域のサイズを自分で調整することもできます。 「完全に中央揃え」方法では、コンテンツ領域のサイズがどのように変化しても、中央に配置されたままになります。

オーバーフローコンテンツを含むコンテナによって。コンテンツ領域がコンテナを超えない限り (コンテンツ コンテナにパディングが予約されていない場合は、max-height: 100%; スタイルを設定できます)、スクロール バーはコンテナ内に生成されます。 .Absolute-Center.is-Overflow {

🎜 min-/max-で始まる属性を設定すると、コンテナを開くことを気にせずにブロックのサイズを制限できます。 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 .Absolute-Center.is-Resizable { 🎜 🎜 min-width: 20%; 🎜 🎜 max-width: 80%; 🎜 🎜 最大-高さ: 80% ; 🎜 🎜 サイズ変更: 両方 ; 🎜 🎜 🎜 🎜

サイズ変更: 両方のスタイルを設定しない場合は、トランジションスタイルを設定することでサイズをスムーズに切り替えることができます。サイズ変更後のコンテナーの高さと幅は、コンテンツの高さと幅よりも小さくなる可能性があるため、必ず overflow: auto スタイルを設定してください。 「完全に中央揃え」方法は、resize:both スタイルの使用をサポートする唯一の方法です。

使用上の注意:

コンテンツ領域に十分なスペースを残すには、max-width/max-height を設定する必要があります。そうしないと、コンテナーがオーバーフローする可能性があります。サイズ変更属性はモバイル ブラウザと IE8 ～ 10 をサポートしていません。ユーザー エクスペリエンスが重要な場合は、ユーザーがサイズを変更できる他の手段があることを確認してください。 サイズ変更スタイルとトランジションを同時に使用すると、ユーザーがサイズの変更を開始するときにトランジション効果時間に等しい遅延が発生します。 画像

画像も使えます!対応するクラスを指定し、スタイル height: auto を指定して、コンテナーのサイズが変化するにつれてサイズが変化する応答性の高い画像を取得します。

height: auto; スタイルは画像には有効ですが、後で紹介する「高さ可変テクニック」を使用しないと、通常のコンテンツ領域がコンテナの長さに合わせて伸びることになることに注意してください。

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

HTML:

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

CSS:

.Absolute-Center.is-Image { Firefox/IE8 では、display: table を使用します。コンテンツ領域は垂直方向に上向きですが、水平方向には中央に配置されます。 IE9/10

height : auto ; .Absolute-Center.is-Image img { 幅: 100% ;高さ: 自動これは応答性の高いソリューションに非常に適しており、オーバーフロー コンテンツを設定するだけです。 もう 1 つの方法は、コンテンツの長さに関係なく、display: table スタイルを中央に配置するように設定することです。この方法は、一部のブラウザ (主に IE と Firefox) で問題を引き起こす可能性があります。 ELL Creative の私の友人 Kalley は、ブラウザがこのセンタリング スキームをサポートしているかどうかを確認するために使用できる Modernizr に基づいたテストを作成しました。このアプローチでは、段階的な強化を行うことができるようになりました。 注意点: この方法ではブラウザの互換性が失われます。Modernizr テストでニーズを満たせない場合は、他の実装ソリューションを検討する必要があるかもしれません。 サイズ変更可能なテクノロジーと互換性がありません。

でdisplay:tableを使用すると、コンテンツエリアが左上隅に移動します。 モバイル版

Safari

のコンテンツエリアは水平方向に配置されますが、パーセント幅を使用すると、水平方向に中心からわずかにずれます。

Javascript:

/* Modernizr Test for Variable Height Content */

Modernizr.testStyles( '#modernizr { display: table; height: 50px; width: 50 px ; マージン:自動; 位置: 0; 左: 0; 右: 0; }' , function(elem, ルール) { 'absolutecentercontent' , Math.round 2 - 25 ) === elem.offsetTop) });

;

.absolutecentercontent .Absolute-Center.is-Variable {

ディスプレイ: テーブル;

高さ: 自動; その他の方法

「完全に中心化」方法は、中心化の問題を解決する良い方法であり、さまざまなニーズを満たすことができる他の多くの方法があります。最も一般的で推奨される方法は、負のマージン値、変換方法、テーブルセル方法、インラインブロック方法、および最近登場した Flexbox 方法です。これらの方法は他の記事で詳しく紹介されているため、ここでは簡単に説明します。

マイナスマージン値

おそらくこれが最もよく使われる方法です。各要素のサイズがわかっている場合は、幅と高さの半分に等しい負のマージン値を設定し (box-sizing: border-box スタイルを使用しない場合は、パディング値も追加する必要があります)、一致させます。上: 50%; 左: 50% ; スタイルはブロック要素を中央に配置します。

予想どおり、これが IE6-7 で動作する唯一の方法であることに注意してください。 Is-Negative

パディング: 20px; ;

利点 :

ブラウザの互換性は非常に優れており、IE6-7 もサポートしており、コーディングはほとんど必要ありません

同時に注意してください: これは応答しないメソッドです。サイズのパーセンテージを使用したり、最小値/最大値/最小値の最大値を設定したりすることはできません。 コンテンツがコンテナーを超える可能性があるため、パディング用にスペースを予約するか、box-sizing: border-box スタイルを使用する必要があります。 変形方法

「完全に中央揃え」方法と同じ利点があり、シンプルかつ効果的で、可変の高さをサポートします。コンテンツのベンダー プレフィックスを使用して、transform:translate(-50%,-50%) および top:50%; left:50%; スタイルを指定することで、コンテンツ ブロックを中央に配置できます。

.is-Transformed { 幅: 50%; マージン: 自動; 上部: 50% ;左: 50% -ウェブキット-transform: 変換( -50% , -50% ); -ms-transform: 変換( -50% , -50% ); 変換: 変換( -50% , -50% );

利点: 可変性の高いコンテンツと少量のコード 同時に、次の点にも注意してください:

ベンダー プレフィックスを記述する必要があるため、他の変換スタイルと競合する場合があります。エッジとフォントレンダリングテーブルを使用 - Cellメソッド

高さはコンテンツに応じて変更でき、ブラウザのサポートも悪くないため、これが最良の方法かもしれません。主な欠点は、追加のタグが生成されることです。中央に配置する必要がある要素ごとに 3 つの追加の HTML タグが生成されます。

HTML:

< ;div クラス = "センターブロック" > !-- コンテンツ -->

CSS:

利点:

.Center-Container.is-Table { 表示 : テーブル } .is-Table .Table-Cell { 表示: テーブルセル; vertical-align : middle ; .is-Table .Center-Block { width : 50% ; margin : 0 auto ;

コンテンツの可変性の高いコンテンツがオーバーフローする親要素を自動的に展開でき、ブラウザとの互換性も優れています。 中央揃えには追加の HTML タグが必要です。 緊急に必要なメソッド: inline-block メソッド。基本的な方法は、display: inline-block、vertical-align: middle スタイルと擬似要素を使用して、コンテンツ ブロックをコンテナー内の中央に配置することです。私の実装では、いくつかの問題を解決するために、他では見られないいくつかの新しいトリックを使用しています。

宣言されたコンテンツ領域の幅は、コンテナの 100% から 0.25em の幅を引いた値を超えることはできません。長いテキストが含まれるエリアのようなものです。そうしないと、コンテンツ領域が先頭にプッシュされるため、:after 疑似クラスが使用されます。 :before 疑似クラスを使用すると、要素のサイズが 100% になります。

コンテンツブロックができるだけ多くの水平スペースを占める必要がある場合は、大きなコンテナに max-width: 99%; スタイルを追加するか、max-width: calc(100% ? 0.25em) スタイルを使用できます。

この方法には table-cell とほぼ同じ利点がありますが、ハックに近いため、最初はこの方法を諦めました。それにもかかわらず、ブラウザーのサポートは優れており、この方法は非常に人気があることが証明されています。

HTML:

< div class = "Center-Container is-Inline" >

< ! -- コンテンツ --> .Center-Container is-Inline:after {

.Center-Container { text-align : center ; オーバーフロー: 自動 ; .Center-Container.is-Inline:after, .is-Inline .Center-Block { 表示 : inline-block;

content : '' ;

height : 100% ; margin-left : -0.25em ; /* フォントによって異なる場合があります */

.is-Inline .Center -Block {

max-width : 99% ; /* コンテンツ ブロックが先頭に押し出される長いコンテンツの問題を防止します */

/* max-width: calc(100% - 0.25em) /* のみIE9+ 用 */

利点:

コンテンツがオーバーフローした場合、コンテンツの高さを自動的に拡張できます。ブラウザーとの互換性が高く、IE7 をサポートするように調整することもできます。

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

スタイルに応じて追加のコンテナーが必要です。 margin-left: -0.25em の場合、水平方向の中央揃えを実現するには、さまざまなフォント サイズに合わせて調整する必要があります。宣言されたコンテンツ領域の幅は、コンテナーの 100% から 0.25em の幅を引いた値を超えることはできません。

CSS の将来の開発の方向性は、Flexbox デザインを使用して垂直方向のセンタリングの問題を解決することです。 Flexbox には複数の中央揃え方法があることに注意してください。列を分割したり、奇妙なレイアウトの問題を解決したりするためにも使用できます。

.Center-Container.is-Flexbox { ディスプレイ : -webkit-box ディスプレイ : -moz-box; : -ms-フレックスボックス ディスプレイ: -webkit-flex; -webkit-box-align: センター ; -ms-flex-align: センター ; -align-items: center ; ; -Webkit-Justify-Content: Center; Justify-Content: Center; 注: IE8-9 はサポートされていません 本文にスタイルを記述する必要があります。最新のブラウザと互換性を持たせるには、さまざまなベンダー プレフィックスが必要です。潜在的なパフォーマンスの問題が発生する可能性があります。各テクノロジーには独自の利点があります。どの方法を採用する必要があるかは、サポートするブラウザと既存のタグの構造によって異なります。 。上記の比較表を使用して、ニーズに最適な方法を選択してください。 「完全中央」の方法は、簡単、便利、早くてタイムリーです。以前に負のマージン値が使用されていた場合は常に、絶対値を使用して中央に配置できます。面倒な計算や余分なラベルは必要なく、サイズはいつでも変更できます。 ブラウザーの互換性を考慮しながら、Web サイトで可変高さのコンテンツが必要な場合は、テーブルセルおよびインラインブロックテクノロジーを試すことができます。何か新しいことを試したい場合は、Flexbox を使用して、この高度なテクノロジーのメリットを享受できます。メリットが来ます。 元のリンク: codepen.io 翻訳: Bole Online - Emjie