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

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

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

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

HTML:

<div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

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

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