Comment centrer verticalement le texte avec CSS?

J’ai un élément div qui contient du texte et je veux aligner le contenu de ce div verticalement au centre.

Voici mon style div:

#box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #FFF; text-align: center; } 
 
Lorem ipsum dolor sit

Quelle est la meilleure façon de procéder?

Vous pouvez essayer cette approche de base:

 div { height: 90px; line-height: 90px; text-align: center; border: 2px dashed #f69c55; } 
 
Hello World!

Une autre façon (non mentionnée ici encore) est d’ utiliser Flexbox .

Ajoutez simplement le code suivant à l’élément container :

 display: flex; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ 

Démo Flexbox 1

 .box { height: 150px; width: 400px; background: #000; font-size: 24px; font-style: oblique; color: #FFF; text-align: center; padding: 0 20px; margin: 20px; display: flex; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ } 
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

Vous pouvez facilement le faire en ajoutant le code CSS suivant:

 display: table-cell; vertical-align: middle; 

Cela signifie que votre CSS ressemble enfin à:

 #box { height: 90px; width: 270px; background: #000; font-size: 48px; font-style: oblique; color: #FFF; text-align: center; margin-top: 20px; margin-left: 5px; display: table-cell; vertical-align: middle; } 
 
Some text

Pour référence et pour append une réponse plus simple:

Pure CSS:

 .vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } 

Ou comme un mixin SASS / SCSS:

 @mixin vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } 

Utiliser par:

 .class-to-center { @include vertical-align; } 

Par le blog de Sebastian Ekström Vertical aligner n’importe quoi avec seulement 3 lignes de CSS :

Cette méthode peut rendre les éléments flous car l’élément est placé sur un «demi pixel». Une solution consiste à définir son élément parent sur preserve-3d. Comme suit:

 .parent-element { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } 

Nous vivons en 2015+ et Flex Box est pris en charge par tous les principaux navigateurs modernes.

Ce sera la façon dont les sites Web sont créés à partir de maintenant.

Apprend le!

Tout le crédit va à ce propriétaire de lien @Sebastian Ekström Link ; s’il vous plaît passer par là. Voir en action codepen . En lisant l’article ci-dessus, j’ai également créé un violon de démonstration .

Avec seulement trois lignes de CSS (à l’exclusion des préfixes de fournisseur), nous pouvons le faire à l’aide d’une transformation: translateY centre verticalement ce que nous voulons, même si nous ne connaissons pas sa hauteur.

La transformation de propriété CSS est généralement utilisée pour les éléments de rotation et de mise à l’échelle, mais avec sa fonction translateY, nous pouvons désormais aligner verticalement les éléments. En général, cela doit être fait avec un positionnement absolu ou en définissant des hauteurs de ligne, mais cela nécessite de connaître la hauteur de l’élément ou de ne travailler que sur du texte sur une seule ligne, etc.

Donc, pour ce faire, nous écrivons:

 .element { position: relative; top: 50%; transform: translateY(-50%); } 

C’est tout ce dont vous avez besoin. C’est une technique similaire à la méthode de la position absolue, mais avec l’avantage que nous n’avons pas à définir de hauteur sur l’élément ou la propriété de position sur le parent. Cela fonctionne tout de suite, même dans Internet Explorer 9 !

Pour le rendre encore plus simple, nous pouvons l’écrire en tant que mixin avec ses préfixes de fournisseur.

Les Flexboxes introduites dans CSS3 sont la solution:

 section { display: flex; display: -webkit-flex; height: 200px; width: 50%; margin: auto; border-radius: 20px; border: 5px solid black; background-color: yellow; } p { text-align: center; margin: auto; /* Important */ font-family: Calibri; } 
 

I'm center!
Flexboxes are great!

Approche flexible

 div { width: 250px; min-height: 50px; line-height: 50px; text-align: center; border: 1px solid #123456; margin-bottom:5px; } span { display: inline-block; vertical-align: middle; line-height: normal; } 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet.

La solution acceptée comme réponse est parfaite pour utiliser la line-height identique à la hauteur de div, mais cette solution ne fonctionne pas parfaitement lorsque le texte est enveloppé ou est sur deux lignes.

Essayez celui-ci si le texte est enveloppé ou est sur plusieurs lignes à l’intérieur d’un div.

 #box { display: table-cell; vertical-align: middle; } 

Pour plus de référence, voir:

  • Texte verticalement centré sur plusieurs lignes

  • 6 méthodes de centrage vertical avec CSS

Essayez cette solution :

 .EXTENDER { position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; overflow-y: hidden; overflow-x: hidden; } .PADDER-CENTER { width: 100%; height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } 
 
Edit this text...

Vous pouvez également utiliser les propriétés ci-dessous.

 display: flex; align-content: center; justify-content : center; 

Vous pouvez utiliser l’extrait de code suivant comme référence. Cela fonctionne comme un charme pour moi:

 < !DOCTYPE html>   Vertically Center Text    

Yes, it's my landing page

Under construction, coming soon!!!

Autrement:

Ne définissez pas l’atsortingbut height du div , mais utilisez padding: pour obtenir l’effet. Comme pour la hauteur de ligne, cela ne fonctionne que si vous avez une seule ligne de texte. Bien que de cette façon, si vous avez plus de contenu, le texte sera toujours centré, mais le div lui-même sera légèrement plus grand.

Donc, au lieu d’aller avec:

 div { height:120px; line-height: 120px; } 

Tu peux dire:

 div { padding: 60px 0; //Maybe 60 minus font-size divided by two, if you want to be exact } 

Cela définira le padding supérieur et inférieur du div à 60px , et le padding gauche et droit à zéro, rendant le div 120px (plus la hauteur de votre police) élevé, et en plaçant le texte verticalement centré dans le div.

Pour tous vos besoins d’alignement vertical!

Déclarez ce Mixin:

 @mixin vertical-align($position: relative) { position: $position; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } 

Puis incluez-le dans votre élément:

 .element{ @include vertical-align(); } 

Je ne suis pas sûr que quelqu’un ait opté pour le writing-mode , mais je pense que cela résout le problème proprement et bénéficie d’un large soutien :

 .vertical { //border: 1px solid green; writing-mode: vertical-lr; text-align: center; height: 100%; width: 100%; } .horizontal { //border: 1px solid blue; display: inline-block; writing-mode: horizontal-tb; width: 100%; text-align: center; } .content { text-align: left; display: inline-block; border: 1px solid #e0e0e0; padding: .5em 1em; border-radius: 1em; } 
 
I'm centered in the vertical and horizontal thing

Pour une seule ligne de texte (ou un seul caractère), vous pouvez utiliser cette technique:

Il peut être utilisé lorsque #box a non-fixe, hauteur relative en% .

 #box::before { display: block; content: ""; height: 50%; } #box::after { vertical-align: top; line-height: 0; content: "TextContent"; } 

Voir la démo en direct à JsBin (plus facile à modifier CSS) ou JsFiddle (plus facile de changer la hauteur du cadre de résultat).

Si vous souhaitez placer du texte interne en HTML, et non en CSS, vous devez envelopper le contenu textuel dans un élément inline supplémentaire et modifier #box::after pour le faire correspondre. (Et, bien sûr, le content: propriété doit être supprimée.)
Par exemple,

TextContent


Dans ce cas, #box::after devrait être remplacé par #box span .

Pour le support IE8, vous devez remplacer :: with ::

La manière simple et polyvalente est (comme approche de table de michielvoo):

 [ctrv]{ display:table !important; } [ctrv] > *{ /* adressing direct discendents */ display:table-cell; vertical-align: middle; // text-align: center; /* optional */ } 

L’utilisation de cet atsortingbut (ou d’une classe équivalente) sur une balise parent fonctionne même pour de nombreux enfants à aligner:

     

Essayez la propriété transform:

  #box { height: 90px; width: 270px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Une solution très simple et puissante pour aligner verticalement le centre:

 .outer-div { height: 200px; width: 200px; text-align: center; border: 1px solid #000; } .inner { position: relative; top: 50%; transform: translateY(-50%); color: red; } 
 
No data available

Le code suivant placera le div au milieu de l’écran indépendamment de la taille de l’écran ou de la taille de l’écran:

 .center-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 100vh; } 
      
I'm in the center

J’ai vu les réponses précédentes, et elles ne fonctionneront que pour cette largeur d’écran (pas de réponse). Pour le responsive, vous devez utiliser flex.

Exemple:

 div{ display:flex; align-item:center;} 

Essayez le code suivant:

 display: table-cell; vertical-align: middle; 
 div { height: 80%; width: 100%; text-align: center; display: table-cell; vertical-align: middle; background: #4CAF50; color: #fff; font-size: 50px; font-style: italic; } 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Encore meilleure idée pour cela. Vous pouvez faire comme ça aussi

 body, html { height: 100%; } .parent { white-space: nowrap; height: 100%; text-align: center; } .parent:after { display: inline-block; vertical-align: middle; height: 100%; content: ''; } .centered { display: inline-block; vertical-align: middle; white-space: normal; } 
 

Lorem ipsum dolor sit amet.

Je voudrais juste étendre la réponse de @michielvoo afin de libérer le besoin de hauteur de ligne et de respiration de hauteur de div. Il s’agit essentiellement d’une version simplifiée comme celle-ci:

 div { width: 250px; /* height: 100px; line-height: 100px; */ text-align: center; border: 1px solid #123456; background-color: #bbbbff; padding: 10px; margin: 10px; } span { display: inline-block; vertical-align: middle; line-height: normal; } 
 
All grown-ups were once children... but only few of them remember it
And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.

J’avais besoin d’une rangée d’éléphants cliquables, centrés verticalement, mais sans utiliser de table pour contourner certaines bizarreries d’Internet Explorer 9.

J’ai finalement trouvé le meilleur CSS (pour mes besoins) et c’est génial avec Firefox, Chrome et Internet Explorer 11. Malheureusement, Internet Explorer 9 continue de se moquer de moi …

 div { border: 1px dotted blue; display: inline; line-height: 100px; height: 100px; } span { border: 1px solid red; display: inline-block; line-height: normal; vertical-align: middle; } .out { border: 3px solid silver; display: inline-block; } 
 
A lovely clickable option.
Something charming to click on.

Placez-le dans le button au lieu de div si vous ne vous souciez pas de son petit effet 3D visuel.

 #box { height: 120px; width: 300px; background: #000; font-size: 48px; font-style: oblique; color: #FFF; } 
  

Une approche meilleure, plus simple et plus réactive consiste à définir une margin-top à environ 45%:

 margin-top: 45%; 

Vous devrez peut-être jouer avec ce nombre, mais ce sera au centre de la division environnante.

 .element{position: relative;top: 50%;transform: translateY(-50%);} 

Ajoutez ce petit code dans la propriété CSS de votre élément. C’est génial. Essayez-le!

Les nouveaux navigateurs prennent désormais en charge la fonction CSS calc . Si vous ciblez ces navigateurs, vous pouvez envisager de faire quelque chose comme ceci:

 
Here are two lines that will be centered even if the parent div changes size.
 < !DOCTYPE html>      

Hello

Où que vous vouliez un style de centre vertical, vous pouvez essayer l’ display:table-cell et vertical-align:middle .

Exemple:

 #box { display: table-cell; vertical-align: middle; height: 90px; width: 270px; background: #000; font-size: 48px; font-style: oblique; color: #FFF; text-align: center; margin-top: 20px; margin-left: 5px; } 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.