Comment centrer verticalement le contenu à hauteur variable dans un div?

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 bien s’il y avait une solution qui fonctionnerait dans les cas où le conteneur a également une hauteur variable. En outre, j’aimerais une solution avec peu ou pas d’utilisation de hacks CSS et / ou de balisage non sémantique.

texte alt

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 de la div interne vers la demi-hauteur de la div externe ( top: 50%; ) et ensuite la div interne par la moitié de sa hauteur ( transform: translateY(-50%) ). Cela fonctionnera avec la position: absolute ou relative .

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

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

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

Il ne nécessite aucun balisage supplémentaire et semble fonctionner extrêmement bien. Je ne pouvais pas utiliser la méthode display: table car table éléments de la table n’obéissent pas à la propriété max-height .

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

Some text

But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"

C’est quelque chose que j’ai eu besoin de faire plusieurs fois et une solution cohérente exige toujours que vous ajoutiez un petit balisage non sémantique et des hacks spécifiques à certains navigateurs. Lorsque nous prenons en charge le navigateur pour css 3, vous obtenez votre centrage vertical sans pécher.

Pour une meilleure explication de la technique, vous pouvez consulter l’article depuis lequel je l’ai adapté , mais en gros, il s’agit d’append 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-table.

 
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.

Il existe plusieurs façons (hacks) d’appliquer des styles à des ensembles de navigateurs spécifiques. J’ai utilisé des commentaires conditionnels, mais regardez l’article lié ci-dessus pour voir deux autres techniques.

Remarque: il existe des moyens simples pour obtenir un centrage vertical si vous connaissez certaines hauteurs, si vous essayez de centrer une seule ligne de texte ou dans plusieurs autres cas. Si vous avez plus de détails, lancez-les, car il peut exister une méthode qui ne nécessite pas de piratage du navigateur ou 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 flexibilité et les transformations en tant que méthodes alternatives pour obtenir le 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 incomplète pour CSS3.

En utilisant le sélecteur d’enfants, j’ai pris la réponse incroyable de Fadi ci-dessus et je l’ai réduite à une seule règle CSS que je peux appliquer. Il ne me rest plus qu’à append le nom de la classe contentCentered 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; } 
 

Some text

But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"

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

div à centrer:

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

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

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

blabla

blabla

blablabla

lbibdfvkdlvfdks

Ceci est ma solution géniale pour un div avec une hauteur dynamic (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

  

Essayez ceci par vous-même.