Comment puis-je centrer le texte verticalement avec CSS?

une autre façon (pas encore mentionnée ici) est avec Flexbox .

il suffit d'ajouter le code suivant à l'élément conteneur :

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

Flexbox demo 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 */
}

<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

alternativement, au lieu d'aligner le contenu via le conteneur , flexbox peut également centrer le a article flex avec un marge automatique lorsqu'il n'y a qu'un seul article flex dans le conteneur flex (comme l'exemple donné dans la question ci-dessus).

pour centrer l'article flex à la fois horizontalement et verticalement il suffit de le placer avec margin:auto

Flexbox Démo 2

.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;
}
.box span {
  margin: auto;
}

<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

NB: toutes les dispositions ci-dessus s'appliquent aux pièces de centrage lorsqu'elles sont disposées en lignes horizontales . C'est aussi le comportement par défaut, car par défaut la valeur de flex-direction est row . Si, toutefois, les éléments flexibles doivent être disposés en colonnes verticales , alors flex-direction: column devrait être placé sur le conteneur pour placer l'axe principal comme colonne et en outre le justify-content et align-items propriétés maintenant travailler dans l'autre sens autour de avec justify-content: center centrage vertical et align-items: center centrage horizontal)

flex-direction: column démo

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }

<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

un bon endroit pour commencer avec Flexbox pour voir certaines de ses fonctionnalités et obtenir la syntaxe pour le soutien maximum de navigateur est flexyboxes

aussi, le soutien de navigateur de nos jours est très bon: caniuse

pour la compatibilité entre navigateurs pour display: flex et align-items , vous pouvez utiliser ce qui suit:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

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

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

ce qui 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;
}

<div id="box">
  Some text
</div>

pour référence et pour ajouter une réponse plus simple:

CSS pur:

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

Or as a SASS/ SCSS Mixin:

@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 Sébastien Ekström du blog Vertical align quoi que ce soit avec seulement 3 lignes de CSS :

cette méthode peut rendre les éléments flous en raison de l'élément placé sur un "demi-pixel". Une solution pour cela est de régler son élément parent à 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 supporté par chaque navigateur moderne majeur.

Ce sera la façon dont les sites web sont fabriqués à partir d'ici.

l'Apprendre!

Tout le crédit va à ce lien propriétaire @Sébastien Ekström Lien ; s'il vous plaît aller à travers cela. Voir action codepen . En lisant l'article ci-dessus, j'ai aussi créé un violon de démonstration .

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

La transformation de propriété CSS est habituellement utilisée pour la rotation et l'échelle des éléments, mais avec sa fonction translateY nous pouvons maintenant aligner verticalement des éléments. Habituellement, cela doit être fait avec le positionnement absolu ou le réglage des hauteurs de ligne, mais ceux-ci exigent que vous sachiez la hauteur de l'élément ou fonctionne seulement sur le texte simple ligne, etc.

ainsi, pour faire ceci nous écrivons:

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

C'est tout ce dont tu as besoin. C'est une technique similaire à la position absolue méthode, mais avec le bon côté que nous n'avons pas à fixer de hauteur sur l'élément ou la propriété position-sur le parent. Il fonctionne directement de la boîte, même dans Internet Explorer 9 !

pour le rendre encore plus simple, nous pouvons l'écrire comme un mixin avec ses préfixes de vendeur.

Flexboxes qui ont été introduits 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;
}

<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

Note : remplacer la ligne au-dessus de laquelle marquée comme importante par l'une de ces lignes, si vous voulez centrer le texte:

1) uniquement verticalement:

margin: auto 0;

2) uniquement horizontalement:

margin: 0 auto;

UPDATE : comme je l'ai remarqué, cette astuce fonctionne avec des grilles (afficher: grille), aussi.

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

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>

la solution acceptée comme la réponse est parfaite pour utiliser line-height la même que la hauteur de div, mais cette solution ne fonctionne pas parfaitement lorsque le texte est enveloppé ou est en 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 Multicouche Centré Verticalement

• 6 méthodes de centrage Vertical avec CSS

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

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

Construit en utilisant CSS+ .

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. Il fonctionne comme un charme pour moi:

<!DOCTYPE html>
    <html lang="de">
        <head>
            <title>Vertically Center Text</title>
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                }
                body {
                    display: table;
                }
                .centered-text {
                    text-align: center;
                    display: table-cell;
                    vertical-align: middle;
                }
            </style>
        </head>

        <body style="background:#3cedd5">
            <div class="centered-text">
                <h1>Yes, it's my landing page</h1>
                <h2>Under construction, coming soon!!!</h2>
            </div>
        </body>
    </html>

la sortie de l'extrait de code ci-dessus est la suivante:

source code credit: Comment puis-je centrer le texte verticalement avec CSS? - Code Puran

une Autre façon:

Ne définissez pas l'attribut height de div , mais utilisez plutôt padding: pour obtenir l'effet. De la même manière que line-height, cela ne fonctionne que si vous avez une 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;
}

vous pouvez dire:

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

cela positionnera le haut et le bas padding du div à 60px , et le gauche et le droit padding à zéro, faisant du div 120px (plus la hauteur de votre police) haut, et 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%);
}

alors incluez-le dans votre élément:

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

Je ne suis pas sûr que quelqu'un ait pris la route writing-mode , mais je pense qu'il résout le problème proprement et a un large support :

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

<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

cela fonctionnera, bien sûr, avec toutes les dimensions dont vous avez besoin (en plus de 100% du parent). Si vous décommentez les lignes de Frontière, il sera utile de vous familiariser.

JSFiddle démo pour vous de jouer.

Caniuse support : 85.22% + 6.26% = 91.48% (même IE est dedans!)

encore meilleure idée pour ça. 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;
}

<div class="parent">
  <div class="centered">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

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

Il peut lorsque #box non-déterminés", 1519130920" hauteur relative en % .

<div id="box"></div>

#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 à éditer CSS) ou JsFiddle (plus facile à changer la hauteur du cadre de résultat).

si vous voulez placer le texte intérieur en HTML, pas dans CSS, alors vous devez envelopper le contenu du texte dans un élément supplémentaire inline et éditer #box::after pour le faire correspondre. (Et, bien sûr, la propriété content: devrait être supprimée.)

Par exemple,

<div id="box"><span>TextContent</span></div>

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

pour le soutien IE8 vous devez remplacer :: par : .

le moyen simple et polyvalent est (comme michielvoo table approche):

[ctrv]{
    display:table !important;
}

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

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

<parent ctrv>  <ch1/>  <ch2/>   </parent>

Essayez la propriété transform:

 #box {
  height: 90px;
  width: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 <div Id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

une solution très simple et la plus 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;
}

<div class="outer-div">
  <span class="inner">No data available</span>
</div>

le code suivant placera le div au milieu de l'écran quelle que soit la taille de l'écran ou div taille:

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

 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Voir plus de détails sur flex ici .

j'ai vu les réponses précédentes, et elles ne fonctionneront que pour cette largeur d'écran (non responsive). 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;
}

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

je voudrais juste étendre la réponse de @michielvoo afin de libérer le besoin de ligne-hauteur et respiration de la hauteur de div. Il s'agit simplement 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;
}

<div>
  <span>All grown-ups were once children... but only few of them remember it</span>
</div>

<div>
  <span>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.</span>
</div>

NOTE: une partie commentée de css est nécessaire pour fixed-height de l'enveloppe div .

j'avais besoin d'une rangée d'éléphants cliquables, verticalement centrés, mais sans utiliser une table pour contourner une certaine bizarrerie Internet Explorer 9.

j'ai finalement trouvé le plus beau CSS (pour mes besoins) et il est grand avec Firefox, Chrome, et Internet Explorer 11. Malheureusement, Internet Explorer 9 se moque encore 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;
}

<div class="out" onclick="alert(1)">
  <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
  <div> <span>A lovely clickable option.</span> </div>
</div>

<div class="out" onclick="alert(2)">
  <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
  <div> <span>Something charming to click on.</span> </div>
</div>

évidemment vous n'avez pas besoin des frontières, mais ils peuvent aider vous voyez comment cela fonctionne.

le place dans 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;
}

<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>

.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. L'essayer!

les nouveaux navigateurs prennent maintenant en charge la fonction CSS calc . Si vous ciblez ces navigateurs, vous pouvez regarder dans faire quelque chose comme cela:

<div style="position: relative; width: 400px; height: 400px; background-color: red">
  <span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">
    Here are two lines that will be centered even if the parent div changes size.
  </span>
</div>

la clé est d'utiliser style = "top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;" à l'intérieur d'un div parent absolu ou relativement positionné.

où que vous vouliez verticalement style Centre signifie que vous pouvez essayer 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;
}

<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>

Positionnement Absolu et d'Étirement

comme pour la méthode ci-dessus, celle-ci commence par le positionnement relatif et absolu sur les éléments parent et enfant. À partir de là, les choses diffèrent.

dans le code ci-dessous j'ai de nouveau utilisé cette méthode pour centrer l'enfant à la fois horizontalement et verticalement, bien que vous pouvez utiliser la méthode pour le centrage vertical seulement.

html

<div id="parent">
    <div id="child">Content here</div>
</div>

css

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

l'idée avec cette méthode est d'essayer d'obtenir l'élément enfant à étirer à tous les 4 bords en mettant le haut, le bas, à droite et à gauche vales à 0. Parce que notre élément enfant est plus petit que nos éléments parents, il ne peut pas atteindre les 4 bords.

le réglage automatique que la marge sur les 4 côtés cependant provoque des marges opposées pour être égales et affiche notre child div au centre du parent div.

malheureusement, le ci-dessus ne fonctionnera pas dans IE7 et ci-dessous et comme la méthode précédente, le contenu à l'intérieur de la div enfant peut devenir trop grand ce qui fait qu'il est caché.