コンテンツを保持しながら、Div を水平方向と垂直方向に完全に中央揃えにする方法は?

コンテンツを保持した水平方向および垂直方向の Div の中央揃え

Web 開発の領域では、多くの場合、div を水平方向と垂直方向の両方で中央揃えにする必要があります。垂直に。絶対配置やネガティブマージンなどの従来の方法でもこれを実現できますが、div が完全に表示されていない場合にコンテンツがクリップされることがよくあります。この記事では、ウィンドウ サイズに関係なく、コンテンツが常に表示されるようにするソリューションを紹介します。

最新のブラウザ ソリューション: Flexbox

最新のブラウザの場合、Flexbox は洗練されたソリューションを提供します。この問題に。フレックスボックスを使用すると、親コンテナを表示: flex に設定し、子 div を margin: auto に設定することで、コンテンツを中央に配置できます。

<div class="parent">
  <div class="child">This works with any content</div>
</div>

.parent {
  display: flex;
}

.child {
  margin: auto;
}

古いブラウザのサポート

フレックスボックスをサポートしていないブラウザの場合は、CSS 変換を使用できます。 div を位置: 絶対、左: 50%、上: 50% に設定し、translate(-50%, -50%) の変換を適用すると、div は中央に配置されます。

<div class="content">This works with any content</div>

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

フレックスボックスまたは CSS 変換を使用すると、div を水平方向と垂直方向の両方で中央に配置でき、ウィンドウ サイズに関係なくコンテンツが常に表示されるようになります。

以上がコンテンツを保持しながら、Div を水平方向と垂直方向に完全に中央揃えにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。