Comment verticalement le contenu du centre à hauteur variable à l'intérieur d'un div?

Juste ajouter

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

à l'intérieur de la div.

Ce qu'il fait est de déplacer la div à l'intérieur de la bordure supérieure à la moitié de la hauteur de la div extérieure (top: 50%;) et puis l'intérieur de la div en place par la moitié de sa hauteur (transform: translateY(-50%)). Cela fonctionne avec position: absolute ou relative.

Gardez à l'esprit que transform et translate marchands des préfixes qui ne sont pas inclus pour des raisons de simplicité.

Codepen: http://codepen.io/anon/pen/ZYprdb

C'est quelque chose que j'ai besoin de faire beaucoup de temps et d'une solution cohérente, vous ajoutez un peu de non-balisage sémantique et certains navigateur spécifique hacks. Quand nous arrivons à la prise en charge du navigateur pour css 3 vous aurez votre centrage vertical sans pécher.

Pour une meilleure explication de la technique, vous pouvez regarder l'article que j'ai adapté à partir de, mais, fondamentalement, il consiste en l'ajout d'un élément supplémentaire, et l'application de différents styles dans internet explorer et les navigateurs qui prennent en charge position:table\table-cell sur la non-éléments de la table.

<div class="valign-outer">
    <div class="valign-middle">
        <div class="valign-inner">
            Excuse me. What did you sleep in your clothes again last night. Really. You're gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe's untied. Don't be so gullible, McFly. You got the place fixed up nice, McFly. I have you're car towed all the way to your house and all you've got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.
        </div>
    </div>
</div>

<style>
    /* Non-structural styling */
    .valign-outer { height: 400px; border: 1px solid red; }
    .valign-inner { border: 1px solid blue; }
</style>

<!--[if lte IE 7]>
<style>
    /* For IE7 and earlier */
    .valign-outer { position: relative; overflow: hidden; }
    .valign-middle { position: absolute; top: 50%; }
    .valign-inner { position: relative; top: -50% }
</style>
<![endif]-->
<!--[if gt IE 7]> -->
<style>
    /* For other browsers */
    .valign-outer { position: static; display: table; overflow: hidden; }
    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }
</style>

Il existe de nombreuses façons (hacks) pour appliquer des styles dans des ensembles spécifiques de navigateurs. J'ai utilisé le conditionnel commentaires, mais regardez l'article lié ci-dessus pour voir les deux autres techniques.

Remarque: Il existe des moyens simples pour obtenir vertical de centrage si vous connaissez des hauteurs à l'avance, si vous essayez de centrer une seule ligne de texte, ou dans plusieurs autres cas. Si vous avez plus de détails pour ensuite les jeter dans car il y a peut être une méthode qui ne nécessite pas de hacks de navigateur ou de non-balisage sémantique.

Mise à jour: nous commençons à Nous faire une meilleure prise en charge du navigateur pour CSS3, apportant à la fois flex-zone et transforme comme d'autres méthodes pour arriver centrage vertical (entre autres effets). Voir cette autre question pour plus d'informations sur les méthodes modernes, mais gardez à l'esprit que la prise en charge du navigateur est encore superficiel pour CSS3.

Meilleur résultat pour moi pour l'instant:

div être centré:

position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;

C'est mon génial solution pour un div avec une dynamique (percentaged) de hauteur.

CSS

.vertical_placer{
  background:red;
  position:absolute; 
  height:43%; 
  width:100%;
  display: table;
}

.inner_placer{  
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

.inner_placer svg{
  position:relative;
  color:#fff;
  background:blue;
  width:30%;
  min-height:20px;
  max-height:60px;
  height:20%;
}

HTML

<div class="footer">
    <div class="vertical_placer">
        <div class="inner_placer">
            <svg> some Text here</svg>
        </div>
    </div>
</div>  

Essayez par vous-même.