Comment centrer div avec CSS

Comment centrer Div avec CSS

Dans la conception Web, il est très important de donner à la page un bel effet. Centrer une Div est une exigence courante dans la conception de pages Web. Aujourd'hui, nous allons présenter comment utiliser CSS pour centrer une Div.

Méthode 1 : utiliser les attributs position et transform

L'attribut position est utilisé pour spécifier la méthode de positionnement de l'élément, et l'attribut transform est utilisé pour convertir l'élément.

Tout d'abord, définissez une largeur et une hauteur fixes en CSS pour le Div qui doit être centré, puis définissez son attribut de position sur absolu, et définissez les attributs left et top sur 50 %, puis utilisez l'attribut transform pour déplacer le ; Div vers la traduction carrée supérieure gauche, la distance de traduction est la moitié de sa propre largeur et hauteur :

.center-div {
  position: absolute;
  width: 300px;
  height: 150px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Cela peut centrer cette Div horizontalement et verticalement dans le conteneur parent.

Méthode 2 : Utiliser Flex Layout

La mise en page Flex est une nouvelle méthode de mise en page introduite dans CSS3, qui peut être utilisée pour centrer des éléments à la fois horizontalement et verticalement.

Tout d'abord, définissez la propriété display du conteneur parent sur flex, puis définissez la propriété justification-content sur center, ce qui centrera le contenu horizontalement ; puis définissez la propriété align-items sur center, qui centrera le contenu verticalement. centré.

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

.parent .center-div {
  width: 300px;
  height: 150px;
}

Méthode 3 : Utiliser les attributs text-align et vertical-align

Applicable aux situations où il n'y a qu'une seule ligne de texte à l'intérieur.

Pour centrer un Div, vous pouvez utiliser l'attribut text-align dans le conteneur parent pour centrer le texte intérieur horizontalement, et l'attribut vertical-align pour centrer le texte verticalement.

.parent {
  text-align: center;
  line-height: 150px;
}

.parent .center-div {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  height: 150px;
}

Résumé :

Les trois méthodes ci-dessus pour réaliser le centrage des éléments consistent d'abord à définir certains attributs sur le conteneur parent, puis à imposer certaines restrictions sur les éléments enfants. La méthode à utiliser doit être choisie en fonction de la situation spécifique. CSS est très flexible et nous devons maîtriser ses différentes utilisations afin de pouvoir jouer librement dans la conception Web.

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!