alignement vertical au milieu dans <div>

Question

Je veux garder la hauteur de #abc div à l'adresse 50px et le texte s'alignent verticalement au milieu de l'écran. div .

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

Answer 1

Vous pouvez utiliser line-height: 50px; vous n'aurez pas besoin vertical-align: middle; là.

Démo

---

La méthode ci-dessus échouera si vous avez plusieurs lignes, dans ce cas vous pouvez envelopper votre texte en utilisant span et ensuite utiliser display: table-cell; y display: table; ainsi que vertical-align: middle; n'oubliez pas non plus d'utiliser width: 100%; pour #abc

Démo

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

#abc span {
  vertical-align:middle;
  display: table-cell;
}

---

Une autre solution à laquelle je pense ici est d'utiliser transform avec translateY() donde Y représente évidemment l'axe Y. C'est assez simple... Tout ce que vous devez faire est de définir la position des éléments à absolute et la position ultérieure 50% de la top et se déplace par rapport à son axe avec une valeur négative -50%

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Démo

Notez que cela ne sera pas supporté sur les anciens navigateurs, par exemple IE8, mais vous pouvez rendre IE9 et d'autres anciennes versions de Chrome et Firefox en utilisant -ms, -moz y -webkit préfixes respectivement.

Pour plus d'informations sur transform vous pouvez vous référer à aquí .

Answer 2

Vieille question mais aujourd'hui CSS3 rend l'alignement vertical vraiment simple ¡!

Il suffit d'ajouter à #abc le css suivant :

display:flex;
align-items:center;

Démonstration simple

Démonstration de la question originale actualisé

Exemple simple :

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

<div class="vertical-align-content">
  Hodor!
</div>

Answer 3

C'est simple : donnez au parent div ceci :

display: table;

et donnez ceci au(x) div enfant(s) :

display: table-cell;
vertical-align: middle;

C'est ça !

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>

Answer 4

J'ai trouvé cette solution par Sebastian Ekström. C'est rapide, sale, et ça marche vraiment bien. Même si vous ne connaissez pas la hauteur du parent :

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Lire l'article complet aquí .

Answer 5

 div {
    height:200px;
    text-align: center;
    padding: 2px;
    border: 1px solid #000;
    background-color: green;
}

.text-align-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="text-align-center"> Align center</div>