Centrer deux divs verticalement

Question

J'ai besoin d'aide pour centrer deux divs verticalement dans un div fixe largeur/hauteur, où les deux div divisent au milieu de la div parente. La première div enfant a une hauteur maximale, de sorte qu'elle peut évoluer dynamiquement jusqu'à un certain point. Comment puis-je les centrer afin que les divs sarcelle et vert passent au milieu du bleu verticalement?

jsFiddle ICI:https://jsfiddle.net/850sdmhj/

.subtext-container { 
 
    position: absolute; 
 
    width: 180px; 
 
    height: 65px; 
 
    color: #ffffff; 
 
    background-color: blue; 
 
    bottom: 0; 
 
} 
 
.color-teal { 
 
    max-height: 40px; 
 
    overflow: hidden; 
 
    background-color: teal; 
 
} 
 
.color-green { 
 
    max-height: 13px; 
 
    font-size: 9px; 
 
    background-color: green; 
 
}

<div class="subtext-container"> 
 
    <div class="color-teal">teal</div> 
 
    <div class="color-green">green</div> 
 
</div>

Answer 1

Essayez display:flex propriété pour le faire fonctionner.

Mise à jour CSS:

.subtext-container { 
    position: absolute; 
    width: 180px; 
    height: 65px; 
    color: #ffffff; 
    background-color: blue; 
    bottom: 0; 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
} 

.color-teal { 
    max-height: 40px; 
    overflow: hidden; 
    background-color: teal; 
} 

.color-green { 
    height: 13px; 
    font-size: 9px; 
    background-color: green; 
} 

Exemple violon: Demo

Note: S'il vous plaît vérifier le support du navigateur.

support du navigateur:http://caniuse.com/#feat=flexbox

Answer 2

Utilisez le CSS suivant pour la subtext-container

.subtext-container { 
    position: relative; 
    width: 180px; 
    height: 65px; 
    color: #ffffff; 
    background-color: blue; 
    bottom: 0; 
    display:table-cell; 
    vertical-align:middle; 
} 

Mise à jour Fiddle https://jsfiddle.net/850sdmhj/1/

Answer 3

Peut-être, à l'aide d'une enveloppe comme

.color-wrap { position: relative; en haut: 50%; transform: translateY (-50%) }

.subtext-container { 
 
    position: absolute; 
 
    width: 180px; 
 
    height: 65px; 
 
    color: #ffffff; 
 
    background-color: blue; 
 
    bottom: 0; 
 
} 
 

 
.color-teal { 
 
    max-height: 40px; 
 
    overflow: hidden; 
 
    background-color: teal; 
 
} 
 

 
.color-green { 
 
    height: 13px; 
 
    font-size: 9px; 
 
    background-color: green; 
 
} 
 

 
.color-wrap{ 
 
\t position:relative; top:50%; 
 
\t -webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%) 
 
}

<div class="subtext-container"> 
 
    <div class="color-wrap"> 
 
    <div class="color-teal">teal</div> 
 
    <div class="color-green">green</div> 
 
    </div> 
 
</div>

Answer 4

je mettrais .color-sarcelle et .color-vert à l'intérieur une autre plongée avec classe ".vertical-align".

<div class="subtext-container"> 
    <div class="vertical-align"> 
    <div class="color-teal">teal</div> 
    <div class="color-green">green</div> 
    </div> 
</div> 

Et puis dans le fichier CSS:

.vertical-align{ /* This will do the trick to center content vertically */ 
    display: table-cell; 
    vertical-align: middle; 
} 

.subtext-container { 
    display: table; /* Add Display Table to the container */ 
} 

Cela ne fonctionnera que si le récipient (celui avec display: table) a une hauteur fixe.

Votre violon avec l'exemple de travail: https://jsfiddle.net/rx79sb6m/

vous pouvez également lire this post où vous pouvez trouver 5 autres méthodes pour obtenir le même résultat.