Comment centrer verticalement contenu à hauteur variable dans un div ?

Question

Quelle est la meilleure façon d'verticalement centrer le contenu d'une div lorsque la hauteur du contenu est variable. Dans mon cas particulier, la hauteur de la div conteneur est fixe, mais ce serait bien si il y avait une solution qui pourrait fonctionner dans le cas où le conteneur a une hauteur variable. Aussi, j'aimerais une solution avec pas, ou très peu utiliser des hacks CSS et/ou de non-balisage sémantique.

Answer 1

Cela semble être la meilleure solution que j'ai trouvé pour ce problème, aussi longtemps que votre navigateur prend en charge l' :before pseudo élément: CSS-Tricks: Centrage dans l'Inconnu.

Il ne nécessite pas d'extra balisage et semble très bien fonctionner. Je ne pouvais pas utiliser l' display: table méthode table éléments n'obéissent pas à l' max-height de la propriété.

HTML

<div class="block">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my
           shoulder, said&mdash;"Did ye see anything looking like men going
           towards that ship a while ago?"</p>
    </div>
</div>

CSS

.block {
  height: 300px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

.block:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 
  background: #808080; width: 5px;
  */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
}

Lien Direct vers CodePen - http://codepen.io/chriscoyier/pen/gsodI

Answer 2

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

Answer 3

En utilisant le sélecteur d'enfant, j'ai pris Fadi est incroyable réponse ci-dessus et bouilli vers le bas, juste une règle CSS que je peux appliquer. Maintenant, tout ce que j'ai à faire est d'ajouter l' contentCentered nom de la classe pour les éléments que je veux de centre:

HTML

<div class="contentCentered">
    <div>
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my
           shoulder, said&mdash;"Did ye see anything looking like men going
           towards that ship a while ago?"</p>
    </div>
</div>

CSS

.contentCentered {
  text-align: center;
}

.contentCentered:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

.contentCentered > * {
  display: inline-block;
  vertical-align: middle;
}

Fourche CodePen: http://codepen.io/dougli/pen/Eeysg