Comment définir la marge ou le rembourrage en pourcentage de la hauteur du conteneur parent ?

Question

Je me suis creusé la tête pour créer un alignement vertical en css à l'aide des éléments suivants

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

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

<!-- and used the following div structure. -->

    <div class="base">
       <div class="vert-align">
           Content Here
       </div>
    </div>

Bien que cela semble fonctionner dans ce cas, j'ai été surpris de constater que lorsque j'augmentais ou diminuais la largeur de ma division de base, l'alignement vertical se brisait. Je m'attendais à ce que, lorsque je définissais la propriété padding-top, le padding soit calculé en pourcentage de la hauteur du conteneur parent, qui est la base dans notre cas, mais la valeur ci-dessus de 50 % est calculée en pourcentage de la largeur.

Existe-t-il un moyen de définir le rembourrage et/ou la marge en tant que pourcentage de la hauteur, sans recourir à JavaScript ?

Answer 1

Une autre façon de centrer un texte d'une ligne est :

.parent{
  position: relative;
}

.child{
   position: absolute;
   top: 50%;
   line-height: 0;
}

ou simplement

.parent{
  overflow: hidden; /* if this ins't here the parent will adopt the 50% margin of the child */
}

.child{
   margin-top: 50%;
   line-height: 0;
}

Answer 2

C'est un bug très intéressant. (A mon avis, c'est quand même un bug) Belle découverte !

Concernant comment pour le régler, je recommande la réponse de Camilo Martin. Mais quant à pourquoi J'aimerais expliquer un peu cela, si vous le voulez bien.

---

Sur les spécifications CSS J'ai trouvé :

"rembourrage
Pourcentages : se réfère à la largeur du bloc contenant

ce qui est bizarre, mais bon.

Donc, avec un parent width: 210px et un enfant padding-top: 50% j'obtiens une valeur calculée/calculée de padding-top: 96.5px - ce qui n'est pas le cas 105px .

C'est parce que dans Windows (je ne suis pas sûr pour les autres OS), la taille des barres de défilement communes est par défaut 17px × 100% (ou 100% × 17px pour les barres horizontales). Ces 17px sont soustraits avant en calculant le 50% et donc 50% of 193px = 96.5px .

Answer 3

Un padding de 50% ne va pas centrer votre enfant, il va le placer en dessous du centre. Je pense que vous voulez vraiment un padding-top de 25%. Peut-être manquez-vous d'espace au fur et à mesure que votre contenu s'élève ? Avez-vous essayé de définir le paramètre margin-top au lieu de padding-top ?

EDIT : Nevermind, the w3schools site says

% Spécifie le remplissage en pourcentage de la largeur de l'élément contenant.

Alors peut-être qu'il utilise toujours la largeur ? Je n'avais jamais remarqué.

Ce que vous faites peut être réalisé en utilisant display:table (au moins pour les navigateurs modernes). La technique est expliquée ici .