Comment centrer un div avec CSS

Comment centrer un div avec CSS

Dans la production de pages Web, nous avons souvent besoin de centrer un élément div pour rendre la page plus belle et plus facile à lire. Cet article présentera plusieurs façons de centrer les divs en CSS.

1. Utilisez text-align pour centrer l'attribut

text-align est principalement utilisé pour définir l'alignement du contenu en ligne dans les éléments de niveau bloc. Lorsque la valeur de l'attribut text-align est center, le contenu de l'élément sera centré horizontalement.

Pour centrer le div, vous pouvez définir la largeur de l'élément div sur une valeur fixe et définir sa propriété margin sur auto, afin que le div apparaisse au centre de son élément parent.

Le code CSS est le suivant :

div {
  width: 300px;
  margin: 0 auto;
  text-align: center;
}

Le code CSS ci-dessus définit la largeur du div à 300px, l'attribut margin est défini sur 0 auto, de sorte que le div soit centré horizontalement et l'attribut text-align est défini au centre, de sorte que le contenu du div soit également centré horizontalement.

2. Utilisez flex pour centrer

flex est une méthode de mise en page introduite par CSS3. La mise en page Flex fournit plusieurs attributs qui peuvent facilement définir la grille, l'alignement, le tri et d'autres fonctions, ce qui est très approprié pour une mise en page réactive.

Pour créer un div centré à l'aide de flex, vous pouvez définir display: flex sur son élément parent et définir des attributs tels que justifier-contenu et align-items.

Le code CSS est le suivant :

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

.container div {
  width: 300px;
  height: 200px;
}

Dans le code ci-dessus, l'élément .container est défini pour afficher : flex, qui est utilisé pour générer un conteneur flexible. La propriété justifier-content est définie sur center pour centrer tous les éléments enfants horizontalement ; la propriété align-items est définie sur center pour centrer tous les éléments enfants verticalement.

3. Utilisez le positionnement absolu pour centrer

Utilisez le positionnement absolu pour centrer l'élément div dans son élément parent. Les étapes spécifiques sont les suivantes :

Définissez l'attribut position de l'élément div sur absolu ;

Définissez les attributs supérieur et gauche de l'élément div sur 0 

Définissez l'attribut margin de l'élément div sur auto ; Définissez l'attribut de position de l'élément parent défini sur relatif.

Le code CSS est le suivant :

.parent {
  position: relative;
  height: 100%;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 300px;
  height: 200px;
}

Dans le code ci-dessus, l'élément .parent est défini sur position: relative pour un positionnement relatif. L'élément .child est défini sur position : absolue pour un positionnement absolu. Définissez les attributs top, left, right et bottom sur 0, permettant à l'élément .child d'occuper l'intégralité de l'élément .parent. Définissez la valeur de marge sur auto pour centrer l'élément .child horizontalement et verticalement.

Pour résumer, voici trois méthodes de centrage CSS courantes. Chaque méthode a ses propres avantages et inconvénients, et l'application spécifique doit être sélectionnée en fonction de la situation réelle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!