J'ai un divensemble à display:block( 90px heightet width), et j'ai du texte à l'intérieur.

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

J'ai essayé text-align:center, mais ça ne fait pas la partie horizontale, alors j'ai essayé vertical-align:middle, mais ça n'a pas marché.

Des idées?

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

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

C'est ça. S'il peut s'agir de plusieurs lignes, 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 hacks ou à ajouter des divs compliqués ... J'utilise généralement un tableau avec une seule cellule pour le faire ... pour le rendre aussi simple que possible.

Mise à jour pour 2020:

Sauf si vous devez le faire fonctionner sur des navigateurs antérieurs tels qu'Internet Explorer 10, vous pouvez utiliser flexbox. Il est largement pris en charge par tous les principaux navigateurs actuels . Fondamentalement, le conteneur doit être spécifié comme un conteneur flexible, avec un centrage le long de son axe principal et transversal:

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

Pour spécifier une largeur fixe pour l'enfant, appelée "élément flexible":

#content {
  flex: 0 0 120px;
}

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

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

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 flexible, puisque cet élément flexible n'est pas un conteneur flexible lui-même, l'ancienne méthode CSS non flexible de fonctionne comme prévu. Cependant, si vous ajoutez un élément flexible supplémentaire au conteneur flexible actuel, les deux éléments flexibles seront placés horizontalement. Pour les placer verticalement, ajoutez le flex-direction: column;au conteneur flexible. C'est ainsi que cela fonctionne entre un conteneur flexible et ses éléments enfants immédiats .

Il existe une autre méthode pour effectuer le centrage: en ne spécifiant pas centerla distribution sur l'axe principal et transversal pour le conteneur flexible, mais en spécifiant plutôt margin: autosur l'élément flexible pour occuper tout l'espace supplémentaire dans les quatre directions et les marges uniformément réparties rendra l'élément flexible centré dans toutes les directions. Cela fonctionne sauf lorsqu'il existe plusieurs éléments flexibles. En outre, cette technique fonctionne sur MS Edge mais pas sur Internet Explorer 11.

Mise à jour pour 2016/2017:

Il est plus courant de le faire transformet il fonctionne bien même dans les navigateurs plus anciens 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étrécir la largeur:

La solution ci-dessus a utilisé une largeur fixe pour la zone de contenu. Pour utiliser une largeur sous 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 et la line-heightméthode fonctionneraient. Sinon, flexbox ferait l'affaire.

Techniques courantes à 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%en combinaison avec translateX(-50%) translateY(-50%)pour centrer dynamiquement verticalement / horizontalement l'élément.

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

• Approche 2 - Méthode Flexbox:

  Exemple ici / Exemple plein écran

  Dans les navigateurs pris en charge , définissez l' displayélément cible sur flexet utilisez-le align-items: centerpour le centrage vertical et justify-content: centerpour le centrage horizontal. N'oubliez pas d'ajouter des préfixes de fournisseur pour une prise en charge supplémentaire du navigateur ( 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 plein écran

  Dans certains cas, vous devrez vous assurer que la hauteur de l'élément html/ bodyest définie sur 100%.

  Pour un alignement vertical, définissez l'élément parent widthde / heightpour 100%et ajouter display: table. Ensuite, pour l'élément enfant, modifiez le displayà table-cellet ajoutez vertical-align: middle.

  Pour le centrage horizontal, vous pouvez soit ajouter text-align: centerpour centrer le texte et tout autre inlineélément enfant. Alternativement, vous pouvez utiliser en margin: 0 autosupposant que l'élément est de blockniveau.

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

• Approche 4 - Absolument positionnée 50%par le haut avec déplacement:

  Exemple ici / Exemple plein écran

  Cette approche suppose que le texte a une hauteur connue - dans ce cas, 18px. Positionnez simplement l'élément 50%par le haut, par rapport à l'élément parent. Utilisez une margin-topvaleur négative qui correspond à 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 - La line-heightméthode (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 vous suffit de définir line-heightsur l'élément enfant une valeur égale à la hauteur fixe de l'élément parent.

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

  .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. Allez avec l'un des 3 premiers.

Utilisation de flexbox / CSS:

<div class="box">
    <p>&#x0D05;</p>
</div>

Le CSS:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

Tiré de Astuce rapide: le moyen le plus simple de centrer les éléments verticalement et horizontalement

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

Seules les cellules du tableau prennent en charge le vertical-align: middle;, mais vous pouvez donner cette définition [cellule-tableau] au 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
}

J'utilise toujours le CSS suivant pour un conteneur, pour centrer son contenu horizontalement et verticalement.

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

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

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Voyez-le en action ici: https://jsfiddle.net/yp1gusn7/

Vous pouvez essayer du code très simple pour cela:

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

.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  Lorem
</div>

Lien Codepen: http://codepen.io/santoshkhalse/pen/xRmZwr

Donnez cette classe CSS à la <div> ciblée:

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}

<div class="centered">This text is centered horizontally and vertically</div>

Vous pouvez utiliser la flexpropriété sur le parent div et ajouter la margin:autopropriété aux éléments enfants:

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

Vous pouvez voir plus d'options flexici: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Approche 1

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

<div>
  Hello, World!!
</div>

Approche 2

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>

Approche 3

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>

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}

Cela fonctionne pour moi (testé OK!):

HTML:

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS:

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

Vous pouvez choisir d'autres valeurs que 50%. Par exemple, 25% pour centrer à 25% du parent.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

Vous pouvez essayer les méthodes suivantes:

1. Si vous avez un seul mot ou une phrase de ligne, le code suivant peut faire l'affaire.

   Ayez un texte dans une balise div et donnez-lui un identifiant. Définissez les propriétés suivantes pour cet ID.

   id-name {
     height: 90px;
     line-height: 90px;
     text-align: center;
     border: 2px dashed red;
   }

   Remarque: assurez-vous que la propriété line-height est identique à la hauteur de la division.

   Image

   Mais, si le contenu est composé de plusieurs mots ou d'une ligne, cela ne fonctionne pas. En outre, il peut arriver que vous ne puissiez pas spécifier la taille d'une division en px ou% (lorsque la division est vraiment petite et que vous souhaitez que le contenu soit exactement au milieu).

2. Pour résoudre ce problème, nous pouvons essayer la combinaison de propriétés suivante.

   id-name {
     display: flex;
     justify-content: center;
     align-items: center;
     border: 2px dashed red;
   }

   Image

   Ces 3 lignes de code définissent le contenu exactement au milieu d'une division (quelle que soit la taille de l'affichage). Le "align-items: center" aide au centrage vertical tandis que "justification-content: center" le fera centré horizontalement.

   Remarque: Flex ne fonctionne pas dans tous les navigateurs. Assurez-vous d'ajouter des préfixes de fournisseur appropriés pour une prise en charge supplémentaire du navigateur.

LA GRILLE

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.box {
    width: 200px;
    height: 100px;
    background: red;
}

<div class="box center">My text</div>

Réglage de la hauteur de ligne pour obtenir l'alignement vertical.

line-height: 90px;

Ce devrait être la bonne réponse. Le plus propre et le plus simple:

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

Appliquer le style:

position: absolute;
top: 50%;
left: 0;
right: 0;

Votre texte serait centré quelle que soit sa longueur.

Cela a fonctionné pour moi:

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

Pour moi, c'était la meilleure solution:

HTML:

 <div id="outer">  
     <img src="logo.png">
 </div>

CSS:

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

Code vraiment simple qui fonctionne pour moi! Une seule ligne et votre texte sera centré horizontalement.

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

La sortie ressemble à ceci:

Veuillez voter cette réponse si cela fonctionne juste pour épargner du temps aux développeurs à la recherche de solutions faciles. Merci! :)

Essayez l'exemple suivant. J'ai ajouté des exemples pour chaque catégorie: horizontal et vertical

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html>