Comment centrer la div verticalement à l'intérieur de la div mère absolument positionnée

j'essaie d'obtenir conteneur bleu au milieu de rose, mais semble vertical-align: middle; ne pas faire le travail dans ce cas. 

<div style="display: block; position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;">
        <div style="background-color: lightblue;">test</div>
    </div>
</div>

résultat:

enter image description here

attente:

enter image description here

veuillez indiquer comment je peux y parvenir.

Jsfiddle

79
demandé sur Vladimirs 2015-02-11 16:03:26

8 réponses

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

il y a plusieurs façons de réaliser des alignements verticaux qui peuvent ou non répondre à vos besoins. Cependant je vais vous montrer deux méthodes de mes favoris:

1. Utilisant transform et top 

.valign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* vendor prefixes omitted due to brevity */
}
<div style="position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

le point clé est qu'une valeur en pourcentage sur top est relative à la height du bloc contenant; tandis qu'une valeur en pourcentage sur transform s est relative à la taille de la boîte elle-même (la boîte limite).

si vous rencontrez problèmes de rendu de police (police floue), le correctif est d'ajouter perspective(1px) à la transform déclaration ainsi il devient: 

transform: perspective(1px) translateY(-50%);

il est intéressant de noter que CSS transform est pris en charge dans IE9+ .

2. En utilisant inline-block (pseudo-)éléments

dans cette méthode, nous avons deux frères et sœurs inline-block éléments qui sont alignés verticalement au milieu par vertical-align: middle déclaration.

l'Un d'eux a un height de 100% de son parent, et l'autre est notre élément dont nous avons voulu aligner au milieu. 

.parent {
    text-align: left;
    position: absolute;
    height: 56px;
    background-color: pink;
    white-space: nowrap;
    font-size: 0; /* remove the gap between inline level elements */
}

.dummy-child { height: 100%; }

.valign {
    font-size: 16px; /* re-set the font-size */
}

.dummy-child, .valign {
    display: inline-block;
    vertical-align: middle;
}
<div style="position: absolute; left: 50px; top: 50px;">
    <div class="parent">
        <div class="dummy-child"></div>
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

enfin, nous devrions utiliser l'une des méthodes disponibles pour supprimer l'écart entre les éléments de niveau en ligne .

195
répondu Hashem Qolami 2018-04-04 23:55:36

utilisez ceci: 

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

référez ce lien: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css /

28
répondu Điển Trương 2016-11-25 10:53:59

utilisez flex blox dans votre div absoutely 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;
}
11
répondu Chris Aelbrecht 2016-06-05 21:55:00

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%);
}
7
répondu kmiloangel 2017-08-14 15:39:53

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;
}
<div class="a">
  <div  class="b">
    <div class="c" >test</div>
  </div>
</div>
3
répondu G-Cyr 2015-02-11 13:10:58

s'il vous Plaît vérifier cette réponse à une question similaire.

C'est de loin la façon la plus facile que j'ai trouvée.

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

NOTE. J'ai utilisé display: -webkit-flex; au lieu de display: flex; pour tester à l'intérieur de safari.

note de bas de page. Je suis un novice seulement, partageant l'aide de quelqu'un qui est clairement expérimenté.

1
répondu Whanau Paitai 2017-05-23 12:18:29

Voici une façon simple d'utiliser Top object.

eg: si la taille absolue de l'élément est de 60px. 

.absolute-element { 
    position:absolute; 
    height:60px; 
    top: calc(50% - 60px);
}
1
répondu Sainul Abid 2017-03-20 07:46:01

une solution simple supplémentaire

HTML: 

<div id="d1">
    <div id="d2">
        Text
    </div>
</div>

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;  
}
0
répondu Hicham 2018-05-25 09:46:15