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

Question

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

J'ai besoin que le texte soit aligné au centre à la fois verticalement et horizontalement.

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

Des idées ?

Answer 1

S'il s'agit d'une seule ligne de texte et/ou d'image, c'est facile à faire. Il suffit d'utiliser :

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

C'est tout. S'il peut y avoir plusieurs lignes, alors c'est un peu plus compliqué. Mais il existe des solutions sur http://pmob.co.uk/ . Recherchez "alignement vertical".

Puisqu'ils ont tendance à être des bidouillages ou à ajouter des divs compliqués... j'utilise généralement un tableau avec une seule cellule pour le faire... pour que ce soit aussi simple que possible.

---

Mise à jour pour 2020 :

À moins que vous n'ayez besoin de le faire fonctionner sur des navigateurs antérieurs tels qu'Internet Explorer 10, vous pouvez utiliser flexbox. Il s'agit largement pris en charge par tous les principaux navigateurs actuels . Fondamentalement, le conteneur doit être spécifié comme un conteneur flexible, ainsi que le centrage le long de son axe principal et de son axe transversal :

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

Pour spécifier une largeur fixe pour l'enfant, ce qui est appelé un "élément flexible" :

#content {
  flex: 0 0 120px;
}

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

Pour rétrécir le contenu, c'est encore plus simple : il suffit d'enlever la balise flex: ... de l'article flexible, et il est automatiquement emballé sous film plastique.

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 remarque technique si vous devez le personnaliser : à l'intérieur de l'élément flex, étant donné que cet élément flex n'est pas lui-même un conteneur flex, l'ancienne méthode non flexbox de CSS fonctionne comme prévu. Toutefois, si vous ajoutez un élément flex supplémentaire au conteneur flex actuel, les deux éléments flex seront placés horizontalement. Pour les placer verticalement, ajoutez la balise flex-direction: column; au conteneur flex. C'est ainsi que cela fonctionne entre un conteneur flexible et son immédiat éléments enfants.

Il existe une autre méthode pour effectuer le centrage : en ne spécifiant pas l'adresse de l'ordinateur. center pour la distribution sur l'axe principal et l'axe transversal pour le conteneur flexible, mais spécifiez plutôt margin: auto sur l'élément flexible afin d'occuper tout l'espace supplémentaire dans les quatre directions, et les marges uniformément réparties permettront de centrer l'élément flexible dans toutes les directions. Cette méthode fonctionne sauf lorsqu'il y a plusieurs éléments flexibles. En outre, cette technique fonctionne sur MS Edge mais pas sur Internet Explorer 11.

---

Mise à jour pour 2016 / 2017 :

On peut le faire plus couramment avec transform et il fonctionne bien même dans les anciens navigateurs tels qu'Internet Explorer 10 et Internet Explorer 11. Il peut prendre en charge plusieurs lignes de texte :

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

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

Pour rétracter la largeur :

La solution ci-dessus utilisait une largeur fixe pour la zone de contenu. Pour utiliser une largeur réduite, 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 la flexbox ne fonctionnera pas et la méthode ci-dessus ainsi que l'option line-height fonctionnerait. Sinon, la méthode flexbox ferait l'affaire.

Answer 2

Techniques courantes en 2014 :

---

• Approche 1 - transform translateX / translateY :

  Exemple ici / Exemple de plein écran

  Sur navigateurs supportés (la plupart d'entre eux), vous pouvez utiliser top: 50% / left: 50% en combinaison avec translateX(-50%) translateY(-50%) pour centrer dynamiquement l'élément verticalement/horizontalement.

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

---

• Approche 2 - Méthode Flexbox :

  Exemple ici / Exemple de plein écran

  Sur navigateurs supportés fixer le display de l'élément ciblé à flex et utiliser align-items: center pour le centrage vertical et justify-content: center pour le centrage horizontal. N'oubliez pas d'ajouter les préfixes des fournisseurs pour une prise en charge supplémentaire par les navigateurs ( voir l'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 de plein écran

  Dans certains cas, vous devrez veiller à ce que la html / body la hauteur de l'élément est fixée à 100% .

  Pour l'alignement vertical, définissez l'attribut width / height a 100% et ajouter display: table . Ensuite, pour l'élément enfant, modifiez l'élément display a table-cell et ajouter vertical-align: middle .

  Pour le centrage horizontal, vous pouvez soit ajouter text-align: center pour centrer le texte et tout autre inline les éléments des enfants. Vous pouvez également utiliser margin: 0 auto en supposant que l'élément est 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 de plein écran

  Cette approche suppose que le texte a une hauteur connue - dans ce cas, 18px . Il suffit de positionner absolument l'élément 50% à partir du haut, par rapport à l'élément parent. Utilisez une valeur négative margin-top qui est égale à la moitié de la hauteur connue de l'élément, dans ce cas - -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 - Le line-height méthode (la moins souple - non suggérée) :

  Exemple ici

  Dans certains cas, l'élément parent aura une hauteur fixe. Pour le centrage vertical, il suffit de définir une valeur de 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 est important 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'une des trois premières.

Answer 3

Ajoutez la ligne display: table-cell; à votre contenu CSS pour cette division.

Seules les cellules de tableau prennent en charge l'option vertical-align: middle; mais vous pouvez donner cette définition [table-cell] à la div...

Un exemple en direct est ici : http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

Answer 4

Ajustement de la hauteur de la ligne pour obtenir l'alignement vertical.

line-height: 90px;

Answer 5

Essayez ceci sur le div :

.block_div {
  height: 90px;
  width: 90px;
  text-align: center;
  /*vertical-align: middle;*/
  line-height: 20px;
}