Comment centrer le div verticalement à l’intérieur du div parent

J’essaie de mettre le récipient bleu au milieu du rose, mais semble vertical-align: middle; ne fait pas le travail dans ce cas.

 
test

Résultat:

entrer la description de l'image ici

Attente:

entrer la description de l'image ici

Veuillez suggérer comment je peux y parvenir.

Jsfiddle

Tout d’abord, notez que vertical-align ne s’applique qu’aux cellules de tableau et aux éléments de niveau en ligne.

Il y a plusieurs façons d’obtenir des alignements verticaux qui peuvent ou non répondre à vos besoins. Cependant, je vais vous montrer deux méthodes parmi mes favoris:

1. Utilisation de transform et top

 .valign { position: relative; top: 50%; transform: translateY(-50%); /* vendor prefixes omitted due to brevity */ } 
 
test

utilisez ceci :

 .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 

reportez-vous à ce lien: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/

Utilisez flex blox dans votre div parfaitement positionné pour centrer son contenu.

Voir exemple https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview

 .some-absolute-div { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } 

Centrer verticalement et horizontalement:

 .parent{ height: 100%; position: absolute; width: 100%; top: 0; left: 0; } .c{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); } 

Vous pouvez utiliser display:table / table-cell;

 .a{ position: absolute; left: 50px; top: 50px; display:table; } .b{ text-align: left; display:table-cell; height: 56px; vertical-align: middle; background-color: pink; } .c { background-color: lightblue; } 
 
test

Veuillez vérifier cette réponse à un problème similaire.

C’est de loin le moyen le plus facile que j’ai trouvé.

https://stackoverflow.com/a/26079837/4593442

REMARQUE. J’ai utilisé l’ affichage: -webkit-flex; au lieu de l’ affichage: flex; pour tester à l’intérieur du safari.

NOTE DE BAS DE PAGE. Je ne suis qu’un novice, partageant l’aide de quelqu’un qui est clairement expérimenté.

Voici un moyen simple d’utiliser l’object Top.

Par exemple: Si la taille de l’élément absolu est de 60px.

 .absolute-element { position:absolute; height:60px; top: calc(50% - 60px); } 

Une solution simple supplémentaire

HTML:

 
Text

CSS:

 #d1{ position:absolute; top:100px;left:100px; } #d2{ border:1px solid black; height:50px; width:50px; display:table-cell; vertical-align:middle; text-align:center; }