alignement vertical au milieu dans <div>

Je veux garder la hauteur de #abc divat 50pxet le texte pour l'aligner verticalement au milieu du 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>

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

Démo

Ce qui précède échouera si vous avez plusieurs lignes, donc dans ce cas, vous pouvez envelopper votre texte en utilisant spanet que utiliser display: table-cell;et display: table;avec 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 peux penser ici est d'utiliser la transformpropriété avec translateY()où Ysignifie évidemment l'axe Y. C'est assez simple ... Tout ce que vous avez à faire est de définir la position des éléments absoluteet la position ultérieure à 50%partir de topet de traduire de son axe avec négatif-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 pris en charge sur les navigateurs plus anciens, par exemple IE8, mais vous pouvez créer IE9 et d'autres versions de navigateur plus anciennes de Chrome et Firefox en utilisant respectivement les préfixes -ms, -mozet -webkit.

Pour plus d'informations sur transform, vous pouvez vous référer ici .

C'est simple: donnez à la div parent ceci:

display: table;

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

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

C'est tout!

.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>

Ancienne question mais de nos jours CSS3 rend l'alignement vertical vraiment simple !

Ajoutez simplement au #abcCSS suivant:

display:flex;
align-items:center;

Démo simple

Démonstration de la question d'origine mise à jour

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>

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

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

Lisez l'article complet ici .

Vous pouvez utiliser la hauteur de la ligne égale à la hauteur du div. Mais pour moi, la meilleure solution est la suivante ->position:relative; top:50%; transform:translate(0,50%);

Que diriez-vous d'ajouter line-height?

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

Violon, hauteur de ligne

Ou paddingsur #abc. C'est le résultat avec un rembourrage

Mettre à jour

Ajoutez dans votre css:

#abc img{
   vertical-align: middle;
}

Le résultat . J'espère que c'est ce que vous cherchez.

Essaye ça:

.main_div{
    display: table;
    width: 100%;
}
.cells {
    display: table-cell;
    vertical-align: middle;
}

Une autre méthode pour centrer un div:

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;
}

Utilisez la propriété CSS translateY pour centrer verticalement votre texte dans son conteneur

<style>
.centertext{

    position: relative;
    top: 50%;
    transform: translateY(40%);

}
</style>

Et puis appliquez-le à votre DIV contenant

  <div class="centertext">
        <font style="color:white; font-size:20px;">   Your Text Here </font>
  </div>

Ajustez le pourcentage de translation en fonction de vos besoins. J'espère que cela t'aides

Ce code est pour l'alignement central vertical et horizontal sans spécifier de hauteur fixe:

.parent-class-name {
  position: relative;
}

.className {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}