CSS 絶対配置でセンタリングを実現する 8 つの方法の詳細なコード説明-CSSチュートリアル-php.cn

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

伊谢尔伦

リリース： 2017-07-20 09:29:54

オリジナル

4030 人が閲覧しました

絶対位置の要素は通常のコンテンツフローではレンダリングされないため、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 属性をサポートする唯一のテクノロジーです。

注:

コンテンツブロックのパディングを補うために max-width/max-height 属性を設定する必要があります。そうしないと、コンテンツブロックがオーバーフローする可能性があります。
モバイルブラウザーと IE8-IE10 ブラウザーはサイズ変更属性をサポートしていないため、ユーザーエクスペリエンスのこの部分が必要な場合は、ユーザーのサイズを変更するための実行可能な方法があることを必ず確認してください。
サイズ変更属性とトランジション属性を一緒に使用すると、ユーザーが再描画するときにトランジションアニメーションの遅延時間が生成されます。

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(&#39;#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }&#39;, function(elem, rule) {
  Modernizr.addTest(&#39;absolutecentercontent&#39;, 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 サイトの他の関連記事を参照してください。