Comment réaliser un centrage vertical en CSS

Dans le développement front-end, le centrage vertical des éléments est une exigence très courante. Pour certains débutants, cela peut être très gênant. Cependant, il existe en réalité de nombreuses façons d’obtenir un centrage vertical à l’aide de CSS. Présentons ci-dessous quelques-unes des méthodes les plus pratiques.

Méthode 1 : Positionnement absolu + margin:auto

Il s'agit d'une méthode relativement courante. Elle utilise la fonction de positionnement absolu CSS et obtient un centrage vertical en définissant les valeurs du haut et de la gauche et en définissant la marge sur auto .

Tout d'abord, vous devez positionner l'élément à centrer en utilisant le positionnement absolu :

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 其它样式 */
}

Ensuite, définissez la marge sur auto pour obtenir un centrage horizontal :

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  /* 其它样式 */
}

L'avantage de cette méthode est qu'elle est plus facile à comprendre et à mettre en œuvre. Et la compatibilité est également très bonne. Notez cependant que cela ne fonctionne que si la hauteur de l'élément que vous souhaitez centrer verticalement est connue.

Méthode 2 : Flex Layout

La mise en page Flex est un mode de mise en page nouvellement ajouté dans CSS3. Cela facilite le centrage vertical.

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

.child {
  /* 其它样式 */
}

L'avantage de cette méthode est qu'elle est très pratique et intuitive, et sa compatibilité est relativement bonne. Cependant, il convient de noter que lorsqu'il doit être compatible avec les anciennes versions des navigateurs, certains traitements de compatibilité doivent être ajoutés.

Méthode 3 : Mise en page du tableau

La mise en page du tableau est également une méthode de mise en page CSS plus ancienne, et elle peut également être utilisée pour réaliser un centrage vertical.

.parent {
  display: table;
  height: 100%;
}

.child {
  display: table-cell;
  vertical-align: middle;
  /* 其它样式 */
}

L'avantage de cette méthode est qu'elle est également très compatible et facile à mettre en œuvre. Cependant, il convient de noter qu’il ne convient pas à tous les scénarios. Si une grande adaptabilité et flexibilité sont requises, certains problèmes peuvent survenir.

Méthode 4 : Hauteur de ligne

Il existe également une méthode plus simple, qui consiste à utiliser la hauteur de ligne pour obtenir un centrage vertical.

.parent {
  height: 300px; /* 定义容器高度 */
  line-height: 300px; /* 容器高度与line-height相同，使文本垂直居中 */
  text-align: center; /* 水平居中 */
}

.child {
  display: inline-block; /* 行内块级元素 */
  vertical-align: middle; /* 垂直居中 */
  /* 其它样式 */
}

L'avantage de cette méthode est qu'elle est très simple et a une bonne compatibilité. Cependant, il convient de noter qu'il ne s'applique qu'aux éléments en ligne ou aux éléments de bloc en ligne, et qu'il ne s'applique qu'aux scénarios de texte centrés verticalement.

Résumé

Ce qui précède présente quelques méthodes CSS courantes pour obtenir un centrage vertical. Différentes méthodes conviennent à différents scénarios et doivent être sélectionnées en fonction des besoins réels. Notez également que parfois une combinaison de méthodes peut être nécessaire pour réaliser un centrage vertical. J'espère que cet article pourra vous aider à réaliser plus facilement le centrage vertical.

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!