Question Comment puis-je centrer verticalement du texte avec CSS?


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

Voici mon style div:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

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


1804
2018-01-14 21:25


origine


Réponses:


Vous pouvez essayer cette approche de base:

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

Cela ne fonctionne que pour une seule ligne de texte, car nous définissons la hauteur de la ligne à la même hauteur que l'élément de boîte conteneur.


Une approche plus polyvalente

C'est une autre façon d'aligner le texte verticalement. Cette solution fonctionnera pour une seule ligne et plusieurs lignes de texte, mais nécessite toujours un conteneur à hauteur fixe:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

Le CSS ne fait que dimensionner <div>, centre verticalement aligne le <span> en définissant le <div>la hauteur de ligne égale à sa hauteur, et rend le <span> un bloc en ligne avec vertical-align: middle. Ensuite, il redéfinit la hauteur de ligne pour la <span>, donc son contenu coulera naturellement à l'intérieur du bloc.


Simuler l'affichage de la table

Et voici une autre option, qui peut ne pas fonctionner sur les plus âgés les navigateurs qui ne supportent pas display: table et display: table-cell (fondamentalement juste Internet Explorer 7). En utilisant CSS, nous simulons le comportement de la table (puisque les tables supportent l'alignement vertical), et le HTML est le même que le second exemple:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>


Utilisation du positionnement absolu

Cette technique utilise un élément positionné en haut, en bas, à gauche et à droite à 0. Il est décrit plus en détail dans un article du magazine Smashing, Centrage horizontal et vertical absolu en CSS.


2447
2018-03-06 08:15



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

Ajoutez simplement le code suivant à récipient élément:

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 */
}
<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 récipient, flexbox peut également centrer le a élément flexible avec un marge automatique  quand il n'y a qu'un seul élément flexible dans le conteneur flexible (comme l'exemple donné dans la question ci-dessus).

Donc, pour centrer l'élément flexible horizontalement et verticalement, placez-le margin:auto

Démo Flexbox 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: Tout ce qui précède s'applique aux articles de centrage tout en les plaçant dans rangées horizontales. C'est aussi le comportement par défaut, car par défaut la valeur pour flex-direction est row. Si, toutefois, des éléments flexibles doivent être présentés colonnes verticales, puis flex-direction: column doit être défini sur le conteneur pour définir l'axe principal comme colonne et en outre le justify-content et align-items les propriétés fonctionnent maintenant l'inverse avec justify-content: center centrage verticalement et align-items: center centrage horizontalement)

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 point de départ avec Flexbox pour voir certaines de ses fonctionnalités et obtenir la syntaxe pour un support maximum du navigateur. flexyboxes 

En outre, le support du navigateur est très bon aujourd'hui: puis-je utiliser

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;

956
2018-01-14 21:29



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

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

Cela signifie que votre CSS ressemble finalement à:

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


109
2017-10-25 18:12



Pour référence et pour ajouter 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 en tant que 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 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 pour cela est de définir 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 pris en charge par tous les principaux navigateurs modernes.

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

Apprend le!


97
2017-08-11 11:59



Tout le crédit va à ce propriétaire du lien @Sebastian Ekström Lien; S'il vous plaît, passez par là. Voyez-le en 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 transformation: 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 la mise à l'échelle des éléments, mais avec sa fonction translateY, nous pouvons maintenant aligner verticalement les éléments. Habituellement, cela doit être fait avec le positionnement absolu ou la définition des hauteurs de ligne, mais celles-ci exigent que vous connaissiez la hauteur de l'élément ou que vous travailliez uniquement sur du texte d'une seule ligne, etc.

Donc, pour ce faire, nous écrivons:

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

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

Pour le rendre encore plus simple, nous pouvons l'écrire en mixin avec ses préfixes de fournisseurs.


49
2017-12-13 20:09



Flexboxes qui ont été 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;
}
<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

Remarque: Remplacez la ligne au-dessus de laquelle est marqué comme important avec l'une de ces lignes, si vous souhaitez centrer le texte:

1) Seulement verticalement:

margin: auto 0;

2) Seulement horizontalement:

margin: 0 auto;

METTRE À JOUR: Comme je l'ai remarqué, cette astuce fonctionne avec les grilles (affichage: grille), aussi.


22
2017-08-28 10:11



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>


13
2018-06-29 09:26



La solution acceptée comme réponse est parfaite à utiliser line-height La même chose 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 emballé 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:


13
2018-04-15 08:28



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

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

9
2017-12-01 18:06



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


9
2018-05-28 07:41