Comment centrer les CSS

Dans le développement front-end, une mise en page centrée est une exigence courante, en particulier dans le développement mobile. Afin d'aligner le style et la beauté visuelle, nous devons centrer les éléments. Voici quelques méthodes de centrage CSS courantes.

1. Disposition centrée horizontalement

1. marge : 0 auto

Il s'agit de la méthode de centrage horizontal la plus couramment utilisée. Il suffit de définir les marges gauche et droite de l'élément sur automatique. Cette méthode fonctionne pour les éléments de bloc, mais ne fonctionne pas lorsque votre élément est en position absolue ou flottant.

.box {
  width: 200px;
  margin: 0 auto;
}

2. text-align: center

Lorsque l'élément que vous devez centrer horizontalement est un élément en ligne, vous pouvez utiliser l'attribut text-align: center pour centrer le texte de son conteneur parent.

.parent {
  text-align: center;
}
.child {
  display: inline-block;
}

3. Flexible Box Layout

Flex layout est une méthode de mise en page CSS puissante qui peut facilement obtenir de nombreux effets de centrage. En utilisant flexbox, nous pouvons placer des éléments enfants au centre du conteneur parent.

.parent {
  display: flex;
  justify-content: center;
}
.child {
  width: 50px;
}

2. Disposition de centrage vertical

1. hauteur de ligne

Il s'agit de la méthode de centrage vertical la plus simple, il suffit de définir la hauteur de ligne de l'élément pour qu'elle soit égale à sa hauteur.

.box {
  height: 80px;
  line-height: 80px;
}

2. table-cell

En utilisant les attributs display: table et table-cell, vous pouvez facilement obtenir l'effet de centrage vertical des éléments.

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

3. Disposition flexible de la boîte

Comme le centrage horizontal, le centrage vertical des éléments peut également être obtenu à l'aide de Flexbox.

.parent {
  display: flex;
  align-items: center;
}
.child {
  height: 50px;
}

3. Disposition de centrage horizontal et vertical

1. Positionnement absolu et marge négative

L'utilisation du positionnement absolu et de la marge négative peut facilement réaliser le centrage horizontal et vertical des éléments.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px; /* height/2 */
  margin-left: -25px; /* width/2 */
  height: 50px;
  width: 50px;
}

2. Transform

Vous pouvez également utiliser Transform pour réaliser le centrage horizontal et vertical des éléments. Définissez simplement les attributs TranslateX et TranslateY de l'élément sur -50 %.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50px;
  width: 50px;
}

3. Flexbox

Flexbox est également le meilleur choix pour le centrage horizontal et vertical des éléments. Définissez le conteneur parent de l'élément sur display: flex, puis utilisez les propriétés justifier-content et align-items pour obtenir une mise en page centrée.

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  height: 50px;
  width: 50px;
}

Ce qui précède sont les méthodes de centrage CSS courantes. Dans le développement réel, la méthode de centrage la plus appropriée doit être sélectionnée en fonction du type, de la structure, des besoins et d'autres facteurs de l'élément.

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!