Comment puis-je définir la marge ou le remplissage CSS en pourcentage de la hauteur du conteneur parent ?

Définition de la marge ou du remplissage en pourcentage de la hauteur du conteneur parent en CSS

Lors de l'alignement vertical d'éléments à l'aide de CSS, il est souvent souhaitable de définir le remplissage ou la marge en pourcentage de la hauteur du conteneur parent. Cependant, définir padding-top, par exemple, en utilisant une valeur de pourcentage calcule ce pourcentage en fonction de la largeur du conteneur, provoquant l'alignement vertical lorsque la largeur du conteneur change.

Pour surmonter cette limitation et aligner les éléments verticalement comme un pourcentage de la hauteur du conteneur parent, envisagez l'approche suivante :

Au lieu de définir un remplissage ou une marge directement sur l'élément enfant, créez une structure imbriquée avec un élément intérieur supplémentaire div :

<div>
<p>Stylez le div interne en utilisant le haut ou le bas pour le remplissage vertical ou la marge, et définissez sa position sur relative ou absolue pour permettre un placement précis :</p>
<pre class="brush:php;toolbar:false">.inner-container {
  top: 50%; /* Vertical padding or margin equal to 50% of parent container height */
  position: relative;
}

En utilisant les propriétés haut ou bas, vous pouvez définir un remplissage vertical ou une marge en pourcentage de la hauteur du conteneur, garantissant ainsi que l'alignement reste cohérent quelle que soit la largeur du conteneur.