Comment centrer verticalement du contenu à hauteur variable au sein d'un div ?

Question

Quelle est la meilleure façon de centrer verticalement le contenu d'un div lorsque la hauteur du contenu est variable.Dans mon cas particulier, la hauteur du conteneur div est fixe, mais ce serait formidable s'il existait une solution qui fonctionnerait dans les cas où le conteneur a également une hauteur variable.De plus, j'aimerais une solution sans ou très peu utilisant des hacks CSS et/ou un balisage non sémantique.

Answer 1

Ajoutez simplement

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

à la div intérieure.

Ce qu'il fait, c'est déplacer la bordure supérieure du div interne à mi-hauteur du div externe (top: 50%;) puis le div intérieur vers le haut de la moitié de sa hauteur (transform: translateY(-50%)).Cela fonctionnera avec position: absolute ou relative.

Garde en tête que transform et translate ont des préfixes de fournisseur qui ne sont pas inclus par souci de simplicité.

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

Answer 2

Cela semble être la meilleure solution que j'ai trouvée à ce problème, tant que votre navigateur prend en charge le ::before pseudo-élément : Astuces CSS :Se recentrer sur l'inconnu.

Cela ne nécessite aucun balisage supplémentaire et semble fonctionner extrêmement bien.Je ne pouvais pas utiliser le display: table méthode parce que table les éléments n’obéissent pas aux max-height propriété.

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

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

Answer 3

C'est quelque chose que j'ai dû faire plusieurs fois et une solution cohérente nécessite toujours que vous ajoutiez un petit balisage non sémantique et quelques hacks spécifiques au navigateur.Lorsque nous obtiendrons la prise en charge du navigateur pour CSS 3, vous obtiendrez votre centrage vertical sans pécher.

Pour une meilleure explication de la technique, vous pouvez regarder l'article dont je l'ai adapté, mais fondamentalement, cela implique d'ajouter un élément supplémentaire et d'appliquer différents styles dans IE et les navigateurs prenant en charge position:table\table-cell sur des éléments non-tableaux.

<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) d'appliquer des styles dans des ensembles spécifiques de navigateurs.J'ai utilisé des commentaires conditionnels mais regardez l'article lié ci-dessus pour voir deux autres techniques.

Note:Il existe des moyens simples d'obtenir un centrage vertical si vous connaissez certaines 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, ajoutez-les car il peut exister une méthode qui ne nécessite pas de piratage du navigateur ni de balisage non sémantique.

Mise à jour: Nous commençons à obtenir une meilleure prise en charge du navigateur pour CSS3, en apportant à la fois la flex-box et les transformations comme méthodes alternatives pour obtenir un 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 des navigateurs est encore sommaire pour CSS3.

Answer 4

En utilisant le sélecteur d'enfant, j'ai pris L'incroyable réponse de Fadi ci-dessus et je l'ai réduit à une seule règle CSS que je peux appliquer.Il ne me reste plus qu'à ajouter le contentCentered nom de classe aux éléments que je veux centrer :

.contentCentered {
  text-align: center;
}

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

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

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

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

Answer 5

Meilleur résultat pour moi jusqu'à présent :

div à centrer :

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

Answer 6

Vous pouvez utiliser la marge automatique.Avec flex, le div semble également centré verticalement.

body,
html {
  height: 100%;
  margin: 0;
}
.site {
  height: 100%;
  display: flex;
}
.site .box {
  background: #0ff;
  max-width: 20vw;
  margin: auto;
}

<div class="site">
  <div class="box">
    <h1>blabla</h1>
    <p>blabla</p>
    <p>blablabla</p>
    <p>lbibdfvkdlvfdks</p>
  </div>
</div>

Answer 7

C'est ma solution géniale pour un div avec une hauteur dynamique (en pourcentage).

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 ceci par vous-même.