高さの割合の Div 内で Div を垂直方向の中央に配置するにはどうすればよいですか?

パーセンテージ高さ Div 内の Div の垂直方向の配置

パーセンテージベースの高さを持つ別の Div 内に Div を垂直に配置すると、ウェブにおける一般的な課題となる

質問: パーセンテージベースの高さを持つ div 内で div を垂直方向の中央に配置することは可能ですか?

回答: はい、さまざまな手法を使用して垂直方向のセンタリングを実現できます。一般的なアプローチは、CSS プロパティ display: table-cell と vertical-align: middle を利用することです。

display: table-cell 内部 div では、テーブルの要素となり、テーブルのセルのプロパティを継承します。 vertical-align: middle プロパティは、テーブル内でセルを垂直に配置します。

たとえば、次のコードを考えてみましょう。

.parent-div {
  height: 50%;
}

.child-div {
  display: table-cell;
  vertical-align: middle;
}

この例では、

child-div は、parent-div 内で垂直方向の中央に配置されます。高さ 50%。

このアプローチはほとんどのブラウザーでうまく機能しますが、Internet Explorer 6 は

display: table-cell プロパティをサポートしていないことに注意することが重要です。そのため、IE6 については、代替方法またはブラウザ間の互換性ソリューションを検討する必要がある場合があります。

以上が高さの割合の Div 内で Div を垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。