高さのパーセンテージを使用して CSS で信頼性の高い垂直方向の配置を実現するにはどうすればよいですか?

親コンテナの高さのパーセンテージを使用した CSS での垂直方向の配置

CSS で垂直方向の配置を実現するために、次のアプローチを採用しました。 :

.base {
  background-color: green;
  width: 200px;
  height: 200px;
  overflow: auto;
  position: relative;
}

.vert-align {
  padding-top: 50%;
  height: 50%;
}

このアプローチは当初は有望でしたが、幅を調整するときに問題があることが判明しました.base div の変更により、垂直方向の配置が崩れます。この動作は、padding-top が期待どおりの高さではなく幅のパーセンテージとして計算されるという事実に起因します。

解決策: 垂直プロパティを使用する

解決するにはこの問題では、padding-top の代わりに垂直方向の CSS プロパティを活用できます。これらのプロパティは、親要素の高さを基準にして定義されます:

.base {
  background-color: green;
  width: 200px;
  height: 200px;
  overflow: auto;
  position: relative;
}

.vert-align {
  top: 50%;
  position: absolute;
}

top を 50% に設定すると、.base コンテナ内で内部の .vert-align div を効果的に垂直方向の中央に配置できます。このアプローチにより、.base の幅に関係なく、垂直方向の配置がそのまま維持されることが保証されます。これが正しく機能するためには、内部 div の位置を絶対に設定することを忘れないでください。

以上が高さのパーセンテージを使用して CSS で信頼性の高い垂直方向の配置を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。