ホームページ > ウェブフロントエンド > CSSチュートリアル > コンテンツを保持しながら DIV を水平方向および垂直方向の中央に配置するにはどうすればよいですか?

コンテンツを保持しながら DIV を水平方向および垂直方向の中央に配置するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-12-15 13:03:16
オリジナル
203 人が閲覧しました

How Can I Horizontally and Vertically Center a DIV While Preserving its Content?

コンテンツを保持して DIV を水平方向と垂直方向に中央揃えにする

DIV を水平方向と垂直方向の両方に配置することが重要であり、コンテンツを維持する必要がある状況そのままでは、負の絶対位置決めの欠点を回避するアプローチを見つける必要があります。

フレックスボックスは、コンテンツを適切に配置する最新のソリューションを提供しますが、古いブラウザーには適していない可能性があります。より広範な互換性を実現するには、次の方法を検討してください。

HTML:

<div>
ログイン後にコピー

CSS:

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
ログイン後にコピー

このアプローチでは、絶対配置と CSS 変換 (-webkit-transform) を利用します。および変換) を使用して DIV を中央に配置します。変換関数は、DIV の位置を幅と高さの半分だけ両方向にシフトします。これにより、ウィンドウ サイズやコンテンツのバリエーションに関係なく、コンテンツが確実に保持されます。

Codepen または JSBin でこの手法をさらに詳しく調べて、その有効性を確認してください。古いブラウザのサポートについては、このスレッドの他の場所で説明されている代替方法が必要になる場合があります。

以上がコンテンツを保持しながら DIV を水平方向および垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート