コンテンツをクリッピングせずにDIVを水平方向および垂直方向の中央に配置する方法は?

コンテンツをカットせずに DIV を水平方向および垂直方向に中央揃えにする

DIV を垂直方向および水平方向に中央揃えにする場合は、ウィンドウが閉じられてもコンテンツがそのまま残るようにすることが重要です。

一般的なアプローチの 1 つは、絶対位置と負のマージンを使用します。ただし、この方法では、ウィンドウ サイズが小さくなったときにコンテンツが切り取られる可能性があります。

最新のブラウザの場合は、Flexbox を使用したより良いソリューションが利用可能です。

HTML

<div>

CSS

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

このアプローチでは、変換を利用して、サイズに影響を与えることなくコンテンツを翻訳します。その結果、ウィンドウのサイズに関係なく、コンテンツは中央に配置されたままになります。

以上がコンテンツをクリッピングせずにDIVを水平方向および垂直方向の中央に配置する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。