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 une hauteur de ligne aussi grande que la hauteur de la division. Mais pour moi la meilleure solution est celle-ci --> position:relative; top:50%; transform:translate(0,50%);

Answer 2

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;
}

Fiddle, hauteur de ligne

Ou padding sur #abc . Voici le résultat avec le rembourrage

Mise à jour

Ajoutez dans votre css :

#abc img{
   vertical-align: middle;
}

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

Answer 3

.container { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<h2>Centering Div inside Div, horizontally and vertically without table</h2>
<p>1. Positioning and the transform property to vertically and horizontally center</p>
<p>2. CSS Layout - Horizontal & Vertical Align</p>

<div class="container">
  <div class="center">
    <p>I am vertically and horizontally centered.</p>
  </div>
</div>

Answer 4

Essayez ç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;
}

Answer 5

Ce code est pour l'alignement vertical central et horizontal central 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%);
}