CSS マージンまたはパディングを親コンテナの高さのパーセンテージとして設定するにはどうすればよいですか?

CSS で親コンテナの高さのパーセンテージとしてマージンまたはパディングを設定する

CSS を使用して要素を垂直方向に整列させる場合、多くの場合、次のように設定することが望ましいです。親コンテナの高さのパーセンテージとしてのパディングまたはマージン。ただし、たとえばパーセンテージ値を使用して padding-top を設定すると、そのパーセンテージがコンテナの幅に基づいて計算されるため、コンテナの幅が変化すると垂直方向の配置がスナップされます。

この制限を克服し、要素を次のように垂直方向に配置するには親コンテナの高さの割合を指定するには、次のアプローチを検討してください。

子要素に直接パディングまたはマージンを設定する代わりに、追加の内部要素を持つ入れ子構造を作成します。 div:

<div>
<p>垂直方向のパディングまたはマージンとして上部または下部を使用して内部 div のスタイルを設定し、正確な配置を可能にするためにその位置を相対または絶対に設定します。</p>
<pre class="brush:php;toolbar:false">.inner-container {
  top: 50%; /* Vertical padding or margin equal to 50% of parent container height */
  position: relative;
}

を使用します。上部または下部のプロパティを使用して、垂直方向のパディングまたはマージンをコンテナーの高さのパーセンテージとして設定して、コンテナーの幅に関係なく配置の一貫性を確保できます。