web-dev-qa-db-fra.com

Texte de centre CSS (horizontalement et verticalement) à l'intérieur d'un bloc div

J'ai un div réglé sur display:block (90pxheight et 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 cela ne fait pas la partie horizontale, alors j'ai essayé vertical-align:middle, mais cela n'a pas fonctionné.

Des idées?

htmlcss
736
Satch3000

Si c'est une 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 ça. Si cela peut être plusieurs lignes, alors c'est un peu plus compliqué. Mais il existe des solutions sur http://pmob.co.uk/ . Cherchez "alignement vertical".

Puisqu'ils ont tendance à être des hacks ou à ajouter des divs compliquées ... J'utilise généralement un tableau avec une seule cellule pour le faire ... pour le rendre aussi simple que possible.

Mise à jour pour 2016/2017:

Cela peut être plus communément fait avec transform, et cela fonctionne même dans les navigateurs plus anciens tels que Internet Explorer 10 et Internet Explorer 11. Il peut supporter 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 utilisait une largeur fixe pour la zone de contenu. Pour utiliser une largeur rétractable, utilisez

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

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

J'ai essayé la flexbox, mais elle n'était pas aussi largement supportée, car cela casserait une ancienne version d'Internet Explorer telle qu'Internet Explorer 10.

1184
太極者無極而生

Techniques communes à partir de 2014:

  • Approche 1 - transformtranslateX/translateY:

    Exemple ici / Exemple de plein écran

    Dans 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 l'élément de manière dynamique, verticalement et horizontalement.

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

  • Méthode 2 - Flexbox méthode:

    Exemple ici / Exemple de plein écran

    Dans navigateurs pris en charge , définissez la display de l'élément ciblé sur flex et utilisez align-items: center pour le centrage vertical et justify-content: center pour le centrage horizontal. N'oubliez pas d'ajouter des préfixes de 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 de plein écran

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

    Pour un alignement vertical, définissez width/height de l'élément parent sur 100% et ajoutez display: table. Ensuite, pour l'élément enfant, remplacez display par table-cell et ajoutez vertical-align: middle.

    Pour le centrage horizontal, vous pouvez soit ajouter text-align: center pour centrer le texte et tout autre élément inline enfants. Vous pouvez également utiliser margin: 0 auto en supposant que l'élément est au niveau block.

    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é 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. Positionnez simplement l'élément 50% à partir du haut, par rapport à l'élément parent. Utilisez une valeur négative de margin-top é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 - La méthode line-height (moins flexible - non suggérée):

    Exemple ici

    Dans certains cas, l'élément parent aura une hauteur fixe. Pour le centrage vertical, il vous 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 fonctionnera pas s'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. Aller avec l'un des 3 premiers.

423
Josh Crozier

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: le moyen le plus simple de centrer des éléments verticalement et horizontalement

64
Vinod

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

Seules les cellules de tableau supportent le vertical-align: middle;, mais vous pouvez donner cette définition de ...

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
}
27
FatherStorm

Vous pouvez essayer un 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

16
Santosh Khalse

J'utilise toujours les CSS suivants 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;

Voir en action ici: https://jsfiddle.net/yp1gusn7/

15
Kent Munthe Caspersen

Donnez cette classe CSS au <div> ciblé:

.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>
14
Aminu Kano

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>
8
shubham agrawal

Une des meilleures approches consiste à utiliser la propriété flex du div parent et à ajouter la propriété margin:auto à la balise element:

.parent {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}

p {
    margin: auto;
}
8
user3021146
# 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
}
4
Narcisse Doudieu Siewe
<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>
4
Arunkumar Maha
div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello, World!!
</div>
2
Debasis Paul
<!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>
1
Nikit Barochiya

Vous pouvez essayer les méthodes suivantes:

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

    Avoir un texte à l'intérieur d'une balise div et lui donner un identifiant. Définissez les propriétés suivantes pour cet identifiant.

    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 de plusieurs lignes, cela ne fonctionne pas. En outre, il sera parfois impossible de spécifier la taille d'une division en px ou en% (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 placent 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 "justifier-contenu: center" le fera horizontalement.

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

1
Clinton Roy
.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}
<div class="cell-row">
  <div class="cell cell-middle">Center</div>
</div>
1
antelove

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% centrer à 25% de la société mère.

1
XPloRR

Appliquer le style:

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

Votre texte serait centré quelle que soit sa longueur.

0
techloris_109

Cela a fonctionné pour moi:

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

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

line-height: 90px;
0
Abhay

Cela devrait être la bonne réponse. Propre et simple:

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

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%);
}
0
Bence Végert
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
        width: 100%;
      }
      p{
      font-size:24px;}
    </style>
  </head>
  <body>
    <div class="container">
      <p>hello world</p>
    </div>
  </body>
</html>
0
Nikit Barochiya