Comment centrer verticalement du texte dans une div avec CSS ?

Mise en place de la structure HTML

Créez une structure HTML avec un conteneur div et du contenu texte :

<div class="container">
  <p>Ce texte sera centré verticalement et horizontalement.</p>
</div>

Cette structure vous donne une base sur laquelle travailler. Le div extérieur est votre conteneur, et le paragraphe contient le texte que vous voulez centrer.

Application des propriétés Flexbox

Flexbox centre le contenu verticalement et horizontalement. Appliquez ces propriétés CSS :

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px; /* Définir une hauteur */
  border: 1px solid #ccc; /* Optionnel : pour la visibilité */
}

Voici ce que font ces propriétés :

• display: flex transforme le conteneur en un conteneur flex.
• align-items: center centre les éléments flex verticalement.
• justify-content: center centre les éléments flex horizontalement.
• Définissez une height pour le conteneur pour voir le centrage vertical.

Cette méthode fonctionne pour du texte sur une seule ligne ou sur plusieurs lignes. Elle s'adapte à différentes tailles d'écran.

.container {
  /* Repli pour les navigateurs plus anciens */
  display: table;
  width: 100%;
  height: 200px;
}

.container p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

/* Flexbox pour les navigateurs modernes */
@supports (display: flex) {
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .container p {
    display: block;
  }
}

Configuration du CSS

La technique de hauteur de ligne centre verticalement le texte sur une seule ligne dans un div. Voici comment la mettre en place :

.container {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #ccc;
}

Dans ce CSS :

• Définissez la height du div à la valeur souhaitée (100px dans cet exemple).
• Faites correspondre line-height à la hauteur du div. Cela pousse le texte vers le centre.
• Ajoutez text-align: center pour le centrage horizontal.

La structure HTML est simple :

<div class="container">
  Texte centré
</div>

Cette méthode fonctionne en faisant occuper au texte toute la hauteur du conteneur, le poussant ainsi au milieu.

.container {
  /* ... styles existants ... */
  white-space: nowrap;
  overflow: hidden;
}

Limites de la méthode de hauteur de ligne

Cette technique présente quelques limites :

• Elle fonctionne mieux pour le texte sur une seule ligne. Avec plusieurs lignes, le texte peut déborder ou être coupé.
• Pour le contenu multi-lignes, cette méthode peut causer des problèmes d'espacement. Chaque ligne essaiera d'occuper toute la hauteur du conteneur.
• Si le texte est plus long que la largeur du conteneur, il se repliera et brisera l'alignement vertical.

Pour ces raisons, la technique de hauteur de ligne est plus utile lorsque votre contenu restera sur une seule ligne et s'adapte à la largeur du conteneur.

Utilisation du CSS pour créer un comportement similaire à une table

La méthode d'affichage de table utilise le CSS pour créer un comportement similaire à une table. Cette méthode centre le texte verticalement dans une div :

.container {
  display: table;
  height: 200px;
  width: 100%;
}

.content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Appliquez ces styles à votre HTML :

<div class="container">
  <div class="content">
    Votre texte va ici. Il peut être sur une ou plusieurs lignes.
  </div>
</div>

Ce CSS fait ce qui suit :

• display: table sur la div parente crée une structure similaire à une table.
• display: table-cell sur l'élément enfant le fait se comporter comme une cellule de table.
• vertical-align: middle centre le contenu verticalement dans la cellule.

.container {
  height: 50vh; /* 50% de la hauteur du viewport */
}

Avantages de la méthode d'affichage de table

Cette méthode présente plusieurs avantages :

1. Elle fonctionne pour du texte sur une ou plusieurs lignes. Le contenu s'adapte à l'intérieur du conteneur.

2. Elle a une bonne compatibilité avec les navigateurs, y compris les anciennes versions d'Internet Explorer.

3. La technique est facile à mettre en œuvre et nécessite un CSS minimal.

4. Elle maintient le flux naturel du texte, évitant les problèmes de sauts de ligne ou de débordement de texte.

Définissez une hauteur sur la div conteneur pour voir l'effet de centrage vertical. Ajustez la largeur selon les besoins de votre mise en page.

Configuration du conteneur de grille

La grille CSS offre une façon simple de centrer verticalement le texte dans une div. Voici comment la configurer :

.container {
  display: grid;
  place-items: center;
  height: 200px;
  border: 1px solid #ccc;
}

Dans ce CSS :

• display: grid transforme le conteneur en une mise en page en grille.
• place-items: center centre l'élément de la grille verticalement et horizontalement.

La structure HTML est simple :

<div class="container">
  <p>Ce texte est centré en utilisant la grille CSS.</p>
</div>

Cette méthode centre le contenu quelle que soit sa longueur ou le nombre de lignes.

Avantages de la grille CSS

La grille CSS présente plusieurs avantages pour centrer le texte :

1. Elle nécessite peu de propriétés CSS pour réaliser le centrage.

2. Elle fonctionne bien avec différents types de contenu, y compris du texte multiligne, des images ou des éléments imbriqués.

3. Les mises en page en grille s'adaptent à différentes tailles d'écran sans requêtes média supplémentaires.

4. Vous n'avez pas besoin d'ajouter d'éléments d'enveloppement supplémentaires.

5. La grille permet un placement précis des éléments dans le conteneur.

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

@supports (display: grid) {
  .container {
    display: grid;
    place-items: center;
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  height: 200px;
  gap: 20px;
}

.item {
  text-align: center;
}

<div class="container">
  <div class="item">Élément 1</div>
  <div class="item">Élément 2</div>
  <div class="item">Élément 3</div>
</div>

La grille CSS offre une solution élégante pour centrer verticalement le texte dans une div, ce qui en fait un bon choix pour le développement web.

Technique de positionnement absolu

La technique de positionnement absolu centre le texte verticalement en utilisant les propriétés de positionnement CSS :

.container {
  position: relative;
  height: 200px;
  border: 1px solid #ccc;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Structure HTML :

<div class="container">
  <div class="text">Texte centré</div>
</div>

Cette méthode fonctionne comme suit :

• position: relative sur le conteneur crée un contexte de positionnement.
• position: absolute sur l'élément texte le sort du flux normal.
• top: 50% déplace le texte à mi-chemin vers le bas du conteneur.
• left: 50% déplace le texte à mi-chemin à travers le conteneur.
• transform: translate(-50%, -50%) décale le texte en arrière de la moitié de sa propre largeur et hauteur.

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Méthode de rembourrage pour le centrage du texte

La méthode de rembourrage utilise un rembourrage égal en haut et en bas pour centrer le texte verticalement :

.container {
  padding: 50px 0;
  text-align: center;
  border: 1px solid #ccc;
}

Structure HTML :

<div class="container">
  <p>Texte centré en utilisant le rembourrage</p>
</div>

Cette technique fonctionne en :

• Ajoutant un padding égal en haut et en bas du conteneur.
• Utilisant text-align: center pour le centrage horizontal.

Pour un design responsive, utilisez des pourcentages ou des unités de viewport pour le rembourrage :

.container {
  padding: 10% 0;
}

Cela permet au rembourrage de s'ajuster en fonction de la largeur du conteneur, maintenant l'effet de centrage sur différentes tailles d'écran.

.container {
  padding: 50px 0;
  min-height: 200px;
}

Les deux méthodes offrent des options pour des besoins de mise en page spécifiques, la technique de positionnement absolu fournissant un contrôle précis et la méthode de rembourrage offrant simplicité et réactivité.