Comment centrer div avec CSS

CSS est un élément essentiel du développement front-end, et centrer un DIV est une exigence courante. Aujourd'hui, nous allons discuter de la façon de centrer un DIV à l'aide de CSS.

Tout d’abord, examinons les deux cas de centrage DIV. L’un est que le DIV est centré dans la fenêtre du navigateur, et l’autre est que le DIV est centré dans le conteneur dans lequel il se trouve.

Le premier cas est que le DIV est centré dans la fenêtre du navigateur. Nous pouvons y parvenir grâce aux méthodes suivantes.

Méthode 1 : utiliser le positionnement absolu et la marge

Tout d'abord, nous définissons le DIV sur un positionnement absolu (position : absolue ;) et définissons les directions gauche, haut, droite et bas sur 0 afin qu'il occupe toute la fenêtre du navigateur. . Ensuite, nous définissons l'attribut margin sur auto pour centrer le DIV à la fois horizontalement et verticalement, comme indiqué ci-dessous :

div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

Méthode 2 : Utiliser la disposition flexbox

flexbox (mise en page élastique) est une méthode de mise en page très populaire, elle peut facilement obtenir une mise en page verticale. et le centrage horizontal, le code est le suivant :

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

Nous définissons le conteneur où se trouve le DIV sur la disposition flexbox (affichage : flex ;), et définissons les éléments d'alignement et le contenu justifié. Si les deux attributs sont centrés, le DIV peut être centré verticalement et horizontalement.

Méthode 3 : Utiliser la disposition en grille

La disposition en grille est une méthode de disposition plus puissante que la disposition flexbox, et elle peut obtenir des effets de disposition plus complexes. En termes d'implémentation du centrage DIV, cela peut être écrit comme ceci :

.container {
  display: grid;
  place-items: center;
}

Nous définissons le conteneur où se trouve le DIV sur une disposition en grille (affichage : grid ;) et définissons l'attribut place-items sur center, afin que le DIV puisse être positionné verticalement et horizontalement. Tout est centré.

Le deuxième cas est que le DIV est centré dans le conteneur dans lequel il se trouve. Nous pouvons y parvenir des manières suivantes.

Méthode 1 : utilisez l'attribut text-align

Si le DIV est un élément en ligne, nous pouvons définir l'attribut text-align du conteneur dans lequel il se trouve au centre pour centrer le DIV horizontalement. Le code est le suivant :

.container {
  text-align: center;
}

div {
  display: inline-block;
}

Ici, nous définissons le DIV comme un élément de bloc en ligne afin que nous puissions y définir l'attribut width. Ensuite, définissez la propriété text-align du conteneur où se trouve le DIV sur center pour centrer le DIV horizontalement.

Méthode 2 : utiliser l'attribut margin

Si le DIV est un élément de niveau bloc, nous pouvons utiliser l'attribut margin pour réaliser le centrage. Le code est le suivant :

div {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

Ici, nous définissons le DIV comme un élément de niveau bloc, et définissons sa largeur à 200 px et sa hauteur à 200 px. Ensuite, définissez les marges gauche et droite du DIV sur automatique pour centrer le DIV horizontalement.

Méthode 3 : Utiliser la disposition flexbox

De même, nous pouvons utiliser la disposition flexbox pour centrer le DIV dans le conteneur où il se trouve. Le code est le suivant :

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

div {
  width: 200px;
  height: 200px;
}

Nous définissons le conteneur dans lequel se trouve le DIV sur la disposition flexbox, et définissons les propriétés align-items et justifier-content sur center, de sorte que le DIV puisse être centré à la fois verticalement et horizontalement.

Pour résumer, nous pouvons utiliser les méthodes ci-dessus pour centrer le DIV, et choisir différentes méthodes en fonction de la situation spécifique. J'espère que cet article pourra vous aider à mieux comprendre et appliquer les techniques de centrage en CSS.

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!