Maison > interface Web > tutoriel CSS > Comment définir le centre de la boîte en CSS

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

下次还敢
Libérer: 2024-04-26 13:57:22
original
674 Les gens l'ont consulté

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;

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

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 :

<code class="css">.container {
  width: 200px;
  height: 100px;
  margin: 0 auto;  /* 水平居中 */
  text-align: center;  /* 文本水平居中 */
  vertical-align: middle;  /* 垂直居中 */
}</code>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal