Comment centrer le div dans son ensemble en CSS

Deux façons d'utiliser CSS pour centrer la Div dans son ensemble : utilisez l'attribut text-align pour définir text-align: center pour le conteneur parent afin que les éléments enfants soient centrés horizontalement dans le conteneur parent. Utilisez la propriété margin pour définir margin: auto pour qu'un Div centre le Div horizontalement.

Comment utiliser CSS pour centrer une Div dans son ensemble

Il existe deux manières principales d'utiliser CSS pour centrer une Div dans son ensemble : en utilisant l'attribut text-align et en utilisant margin Propriétés. text-align 属性和使用 margin 属性。

使用 text-align 属性

• 为父容器设置 text-align: center。这将使子元素在其父容器内水平居中对齐。

使用 margin 属性

• 为 Div 设置 margin: auto。这将设置 Div 的左右外边距为自动，使其在水平方向上居中。

示例

<code class="css">/* 使用 text-align 属性 */
.parent-container {
  text-align: center;
}

.child-div {
  /* 无需设置任何属性，已由父容器居中 */
}

/* 使用 margin 属性 */
.div-with-margin {
  margin: auto;
  /* 无需设置任何其他属性 */
}</code>

注意：

• 使用 margin 属性时，Div 将相对于其父容器居中。如果父容器没有明确的宽度，Div 不会居中。
• 使用 text-align 属性时，如果 Div 包含块级元素，这些元素将相对于 Div 居中，而不是父容器。
• 如果需要在垂直方向上居中，可以使用 vertical-align 属性或 transform

Utilisez l'attribut text-align 🎜🎜

• Définissez text-align: center pour le conteneur parent. Cela centrera l'élément enfant horizontalement dans son conteneur parent. 🎜🎜🎜🎜Utilisez l'attribut margin 🎜🎜
  • Définissez margin: auto pour le Div. Cela définira les marges gauche et droite de la Div sur automatique, en la centrant horizontalement. 🎜🎜🎜🎜Exemple🎜🎜rrreee🎜🎜Remarque : 🎜🎜
    • Lors de l'utilisation de l'attribut margin, le Div sera centré par rapport à son conteneur parent. Si le conteneur parent n'a pas de largeur explicite, le Div ne sera pas centré. 🎜
    • Lors de l'utilisation de l'attribut text-align, si un Div contient des éléments de niveau bloc, ces éléments seront centrés par rapport au Div, et non au conteneur parent. 🎜
    • Si vous devez le centrer verticalement, vous pouvez utiliser l'attribut vertical-align ou l'attribut transform. 🎜🎜

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!