Comment centrer le texte (horizontalement et verticalement) à l'intérieur d'un bloc div ?

Question

J'ai un div défini sur display:block (90px height et width), et j'ai du texte à l'intérieur.

J'ai essayé text-align:center, mais il ne fait pas la partie de centrage vertical, j'ai donc essayé vertical-align:middle, mais ça n'a pas fonctionné.

有什么想法吗？

Answer 1

Technologies couramment utilisées à partir de 2014 :

---

• Approche 1 - transform translateX/translateY :

  Exemple ici / Exemple plein écran

  Dans les navigateurs pris en charge (la plupart d'entre eux), vous pouvez utiliser top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) pour centrer dynamiquement l'élément verticalement/horizontalement.

  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
  }
  

---

• Méthode 2 - Méthode Flexbox :

  Exemple ici / Exemple plein écran

  Dans les navigateurs pris en charge, définissez le display of the targeted element to flex and use align-items: center for vertical centering and justify-content: center pour le centrage horizontal. N'oubliez pas d'ajouter les préfixes du fournisseur pour une prise en charge supplémentaire du navigateur (voir exemple).

  html, body, .container {
      height: 100%;
  }
  .container {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

---

• Approche 3 - table-cell/vertical-align: middle :

  Exemple ici / Exemple plein écran

  Dans certains cas, vous devrez vous assurer que le html/body element's height is set to 100%.

  Pour l'alignement vertical, définissez le width/height to 100% and add display: table. Then for the child element, change the display to table-cell and add vertical-align: middle.

  de l'élément parent

  Pour le centrage horizontal, vous pouvez soit ajouter text-align: center to center the text and any other inline children elements. Alternatively, you could use margin: 0 auto assuming the element is block niveau.

  html, body {
      height: 100%;
  }
  .parent {
      width: 100%;
      height: 100%;
      display: table;
      text-align: center;
  }
  .parent > .child {
      display: table-cell;
      vertical-align: middle;
  }
  

---

• Approche 4 - Positionnement absolu 50% du haut avec déplacement :

  Exemple ici / Exemple plein écran

  Cette approche suppose que le texte a une hauteur connue - dans ce cas, 18px. Just absolutely position the element 50% from the top, relative to the parent element. Use a negative margin-top value that is half of the element's known height, in this case - -9px.

  html, body, .container {
      height: 100%;
  }
  .container {
      position: relative;
      text-align: center;
  }
  .container > p {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      margin-top: -9px;
  }
  

---

• Approche 5 - La méthode line-height (la moins flexible - non suggérée) :

  Exemple ici

  Dans certains cas, l'élément parent aura une hauteur fixe. Pour un centrage vertical, il suffit de définir une valeur line-height sur l'élément enfant égale à la hauteur fixe de l'élément parent.

  Bien que cette solution fonctionne dans certains cas, il convient de noter qu'elle ne fonctionne pas lorsqu'il y a plusieurs lignes de texte - comme ceci .

  .parent {
      height: 200px;
      width: 400px;
      text-align: center;
  }
  .parent > .child {
      line-height: 200px;
  }
  

---

Les méthodes 4 et 5 ne sont pas les plus fiables. Choisissez l'un des 3 meilleurs.

Answer 2

S'il s'agit d'une ligne de texte et/ou d'une image, c'est facile à faire. Utilisez simplement :

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

C'est tout. S'il peut s'agir de plusieurs lignes, c'est un peu plus compliqué. Mais il existe une solution sur http://pmob.co.uk/. Recherchez « alignement vertical ».

Comme il s'agit généralement de hacks ou d'ajouts de divs complexes... Je le fais généralement en utilisant un tableau avec une seule cellule... pour que cela reste aussi simple que possible.

---

Mise à jour 2020 :

À moins que vous ayez besoin de le faire fonctionner sur des navigateurs antérieurs comme Internet Explorer 10, vous pouvez utiliser Flexbox. Il est largement pris en charge par tous les principaux navigateurs actuels . Fondamentalement, le conteneur doit être désigné comme conteneur flexible et centré le long de ses axes principal et transversal :

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Spécifiez une largeur fixe pour un élément enfant, appelé "élément flexible" :

#content {
  flex: 0 0 120px;
}

Exemple : http://jsfiddle.net/2woqsef1/1/

Pour emballer le contenu, c'est encore plus simple : il suffit de supprimer la ligne flex: ... de l'élément flexible, et il est automatiquement emballé sous film rétractable.

Exemple : http://jsfiddle.net/2woqsef1/2/

Les exemples ci-dessus ont été testés sur les principaux navigateurs, notamment MS Edge et Internet Explorer 11.

Une note technique si vous avez besoin de le personnaliser : à l'intérieur de l'élément flex, puisque cet élément flex n'est pas lui-même un conteneur flex, l'ancienne méthode CSS non-flexbox fonctionne comme prévu. Cependant, si vous ajoutez un élément flex supplémentaire. Dans le conteneur flex actuel, les deux éléments flex seront placés horizontalement. Pour les placer verticalement, ajoutez le flex-direction: column; au conteneur flex. Voici comment cela fonctionne entre un conteneur flex et ses éléments enfants immédiats.

Il existe une méthode alternative pour effectuer le centrage : en ne spécifiant pas

sur l'élément flexible pour occuper tout l'espace supplémentaire dans les quatre directions, et les marges uniformément réparties rendront l'élément flexible centré dans toutes les directions. Cela fonctionne sauf lorsqu'il y en a. il y a plusieurs éléments flexibles. De plus, cette technique fonctionne sur MS Edge mais pas sur Internet Explorer 11.center for the distribution on the main and cross axis for the flex container, but instead specify margin: auto.

---

Mise à jour 2016/2017 :

Cela peut être fait plus couramment avec

, et cela fonctionne bien même dans les navigateurs plus anciens tels que Internet Explorer 10 et Internet Explorer 11. Il peut prendre en charge plusieurs lignes de texte :transform

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

Exemple :

https://jsfiddle.net/wb8u02kL/1/

Largeur du film rétractable :

La solution ci-dessus utilise une largeur fixe pour la zone de contenu. Pour utiliser la largeur du film rétractable, utilisez

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Exemple :

https://jsfiddle.net/wb8u02kL/2/

Si la prise en charge d'Internet Explorer 10 est nécessaire, alors flexbox ne fonctionnera pas et la méthode ci-dessus ainsi que la méthode line-height fonctionneront. Sinon, flexbox ferait l'affaire.