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 :
<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!