Pourquoi vertical-align : middle ne fonctionne-t-il pas sur mon span ou div ?

Question

J'essaie de centrer verticalement un span ou div dans un autre élément div élément. Cependant, lorsque je mets vertical-align: middle mais rien ne se passe. J'ai essayé de changer le display des deux éléments, et rien ne semble fonctionner.

C'est ce que je fais actuellement dans ma page web :

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}

.inner {
  vertical-align: middle;
  border: 1px solid red;    
}

.second {
  border: 1px solid blue; 
}

<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Voici un jsfiddle de l'implémentation montrant que cela ne fonctionne pas : http://jsfiddle.net/gZXWC/

Answer 1

Cela semble être la meilleure solution - un certain temps s'est écoulé depuis mon premier message et c'est ce qu'il faut faire maintenant : http://jsfiddle.net/m3ykdyds/200

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

Answer 2

Essayez ceci, ça marche très bien pour moi :

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

Answer 3

La définition de la hauteur de ligne à la même hauteur que la div qui la contient fonctionnera également.

DEMO http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}

Answer 4

Si vous ne pouvez pas compter sur la flexbox... Placez .child en .parent du centre. Fonctionne lorsque la taille des pixels est inconnue (en d'autres termes, toujours) et aucun problème avec IE9+ également.

.parent { position: relative; }

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

<div class="parent" style="background:lightyellow; padding:6em"> 
  <div class="child" style="background:gold; padding:1em">&mdash;</div> 
</div>

Answer 5

Voici un excellent article sur l'alignement vétérinaire J'aime la méthode du flotteur.

http://www.vanseodesign.com/css/vertical-centering/

Le HTML :

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

Et le style correspondant :

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}