Comment définir le centre de la boîte en CSS

En CSS, vous pouvez utiliser plusieurs méthodes pour centrer la boîte : centrage horizontal : margin : 0 auto ; centrage vertical : vertical-align : middle ; centrage horizontal et vertical : display : flex ; : center;

Réglage du centre de la boîte en CSS

En CSS, il existe de nombreuses façons d'aligner la boîte au centre.

Centre horizontal

• margin: 0 auto; : C'est la méthode la plus couramment utilisée, qui aligne la boîte horizontalement par rapport au centre de l'élément parent.
• text-align: center; : centrez uniquement le texte dans la zone.

Vertical center

• vertical-align: middle; : Centrez la boîte verticalement pour aligner l'élément parent.
• line-height : Définissez la hauteur de la boîte de manière à ce que le texte à l'intérieur de la boîte soit centré verticalement. (Applicable à une seule ligne de texte)
• display: flex; align-items: center;  : utilisez la disposition flexbox pour centrer verticalement la boîte afin d'aligner l'élément parent. (Applicable au texte multiligne)

Centrage horizontal et vertical

• transform: translation(-50%, -50%); : Utilisez la transformation CSS pour centrer la boîte horizontalement et verticalement en même temps .
• display: flex; justification-content: center; align-items: center; : utilisez la disposition flexbox pour centrer la boîte horizontalement et verticalement en même temps.

Exemple de code :

.container {
  width: 200px;
  height: 100px;
  margin: 0 auto;  /* 水平居中 */
  text-align: center;  /* 文本水平居中 */
  vertical-align: middle;  /* 垂直居中 */
}

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!