CSS 絶対配置でセンタリングを実現する 8 つの方法の詳細なコード説明

絶対位置の要素は通常のコンテンツ フローではレンダリングされないため、margin:auto は、top: left: 0;bottom: 0; で設定された境界内でコンテンツを垂直方向に中央に配置できます。

センタリング方法:

1. コンテナ内

上記の絶対センタリング方法を使用して、コンテンツを親コンテナの中央に表示できます。

.Center-Container {
  position: relative;
}

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

以下の残りのデモには、デフォルトで上記の CSS スタイルが含まれており、これに基づいて、ユーザーがさまざまな機能を実現するために追加できる追加のクラスのみが提供されます。

2. ビューポート内

コンテンツ ブロックを表示領域内に留まらせたいですか?コンテンツ ブロックをposition:fixedに設定し、より大きな z-index スタッキング プロパティ値を設定します。

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

注: Mobile Safari の場合、コンテンツ ブロックがposition:relative; に設定された親コンテナに配置されていない場合、コンテンツ ブロックは表示領域内で垂直方向の中央に配置されるのではなく、ドキュメント全体で垂直方向の中央に配置されます。

3. サイドバー (オフセット)

固定ヘッダーを設定するか、他のサイドバーを追加したい場合は、次のような CSS スタイル コードをコンテンツ ブロックのスタイルに追加するだけです。 margin:auto; を宣言すると、コンテンツ ブロックは、top、left、bottom、right プロパティを通じて定義した境界ボックス内の垂直方向の中央に配置されます。

コンテンツ ブロックを画面の左側または右側に固定し、コンテンツ ブロックを垂直方向の中央に配置することができます。画面の右側に固定するには right:0;left:auto; を使用し、画面の左側に固定するには left:0;right:auto; を使用します。

.Absolute-Center.is-Right {
  left: auto; right: 20px;
  text-align: right;
}

.Absolute-Center.is-Left {
  right: auto; left: 20px;
  text-align: left;
}

4. レスポンシブ/アダプティブ (レスポンシブ)

絶対センタリングの最大の利点は、パーセンテージ形式での幅と高さの完全なサポートです。属性 min-width/max-width および min-height/max-height も、アダプティブ ボックス内では期待どおりに動作します。

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

コンテンツ ブロック要素にパディングを追加しても、コンテンツ ブロック要素の絶対的な中央揃えには影響しません。

5. オーバーフロー(Overflow)

コンテンツの高さがブロック要素またはコンテナ(position:relativeに設定されたビューポートまたは親コンテナ)より大きい場合、コンテンツはブロックの外に表示される可能性があります。切り捨てにより表示が不完全になります (コンテンツ ブロックのオーバーフロー属性がそれぞれ表示と非表示に設定されている場合のパフォーマンスに相当します)。

オーバーフローの追加: コンテンツの高さがコンテナの高さを超える場合、自動では境界を越えることなくコンテンツ ブロックのスクロール バーが表示されます。

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

コンテンツ ブロック自体にパディングが設定されていない場合は、コンテンツの高さがコンテナーの高さを超えないように max-height: 100% を設定できます。

6. サイズ変更

他のクラスまたは JavaScript コードを使用すると、中心のサイズを手動で再計算することなく、コンテンツ ブロックを確実に中心に配置して再描画できます。もちろん、resize 属性を追加して、ユーザーがコンテンツ ブロックをドラッグ アンド ドロップして再描画できるようにすることもできます。

絶対中央揃えでは、コンテンツ ブロックが再描画されるかどうかに関係なく、コンテンツ ブロックが常に中央に配置されるようにできます。 min-/max- を設定することで、ニーズに応じてコンテンツ ブロックのサイズを制限し、コンテンツがウィンドウ/コンテナからオーバーフローするのを防ぐことができます。

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

size:both 属性を使用しない場合は、CSS3 アニメーション属性の遷移を使用して、再描画されたウィンドウ間のスムーズな遷移を実現できます。再描画されたコンテンツのブロック サイズがコンテンツの実際のサイズより小さくならないように、必ず overflow:auto; を設定してください。

絶対センタリングは、垂直方向のセンタリングを実現するために、size:both 属性をサポートする唯一のテクノロジーです。

注:

1. コンテンツ ブロックのパディングを補うために max-width/max-height 属性を設定する必要があります。そうしないと、コンテンツ ブロックがオーバーフローする可能性があります。

2. モバイル ブラウザーと IE8-IE10 ブラウザーはサイズ変更属性をサポートしていないため、ユーザー エクスペリエンスのこの部分が必要な場合は、ユーザーのサイズを変更するための実行可能な方法があることを必ず確認してください。

3. サイズ変更属性とトランジション属性を一緒に使用すると、ユーザーが再描画するときにトランジション アニメーションの遅延時間が生成されます。

7. 画像

絶対センタリングは写真にも適用できます。クラスクラスまたは CSS スタイルを画像自体に適用し、画像に height:auto スタイルを追加します。外側のコンテナのサイズを変更できる場合、コンテナが再描画されると画像が中央に表示されます。それに応じて再描画され、常に中央に留まります。

height:auto は画像を中央に配置するのに便利ですが、height:auto を画像の外側のコンテンツ ブロックに適用すると、いくつかの問題が発生することに注意してください。通常のコンテンツ ブロックが全体を埋めるように引き伸ばされてしまいます。容器。このとき、高さを可変にする (Variable Height) を使用すると、この問題を解決できます。問題の原因は、画像のレンダリング時に画像の高さを計算する必要があることである可能性があります。これは、画像の高さを自分で定義するのと同じで、ブラウザは margin:auto を解析して垂直方向に中央揃えにすることはありません。他の状況と同様に。したがって、これらのスタイルは親要素ではなく画像自体に適用する方がよいでしょう。

HTML:

<img src="http://placekitten.com/g/500/200" class="Absolute-Center is-Image" alt="" />

CSS:

.Absolute-Center.is-Image {
  height: auto;
}

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

8. 可変高さ

这种情况下实现绝对居中（AbsoluteCentering）必须要声明一个高度，不管你是基于百分比的高度还是通过max-height控制的高度，还有，别忘了设置合适的overflow属性。对自适应/响应式情景，这种方法很不错。

与声明高度效果相同的另一种方法是设置display:table;这样无论实际内容有多高，内容块都会保持居中。这种方法在一些浏览器（如IE/FireFox）上会有问题，我的搭档Kalley

在ELL Creative（访问ellcreative.com ）上写了一个基于Modernizr插件的检测函数，用来检测浏览器是否支持这种居中方法，进一步增强用户体验。

Javascript：

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

浏览器兼容性不太好，若Modernizr不能满足你的需求，你需要寻找其他方法解决。

1.      与上述重绘(Resizing)情况的方法不兼容

2.      Firefox/IE8:使用display:table会使内容块垂直居上，不过水平还是居中的。

3.      IE9/10: 使用display:table会使内容块显示在容器左上角。

4.      Mobile Safari:内容块垂直居中；若使用百分比宽度，水平方向居中会稍微偏离中心位置。

以上がCSS 絶対配置でセンタリングを実現する 8 つの方法の詳細なコード説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。