So zentrieren Sie das Div als Ganzes mit CSS

Zwei Möglichkeiten, CSS zu verwenden, um das Div als Ganzes zu zentrieren: Verwenden Sie das text-align-Attribut, um text-align: center für den übergeordneten Container festzulegen, sodass die untergeordneten Elemente innerhalb des übergeordneten Containers horizontal zentriert sind. Verwenden Sie die Eigenschaft „margin“, um „margin: auto“ für ein Div festzulegen, um das Div horizontal zu zentrieren.

So verwenden Sie CSS, um ein Div als Ganzes zu zentrieren

Es gibt zwei Hauptmethoden, um CSS zu verwenden, um ein Div als Ganzes zu zentrieren: die Verwendung des text-align-Attributs und mit margin Eigenschaften. 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

Verwenden Sie das Attribut text-align 🎜🎜

• Setzen Sie text-align: center für den übergeordneten Container. Dadurch wird das untergeordnete Element innerhalb seines übergeordneten Containers horizontal zentriert. 🎜🎜🎜🎜Verwenden Sie das Attribut margin 🎜🎜
  • Setzen Sie margin: auto für die Div. Dadurch werden die linken und rechten Ränder des Div auf „Automatisch“ eingestellt und es horizontal zentriert. 🎜🎜🎜🎜Beispiel🎜🎜rrreee🎜🎜Hinweis: 🎜🎜
    • Bei Verwendung des Attributs margin wird das Div relativ zu seinem übergeordneten Container zentriert. Wenn der übergeordnete Container keine explizite Breite hat, wird das Div nicht zentriert. 🎜
    • Wenn bei Verwendung des Attributs text-align ein Div Elemente auf Blockebene enthält, werden diese Elemente relativ zum Div und nicht zum übergeordneten Container zentriert. 🎜
    • Wenn Sie es vertikal zentrieren müssen, können Sie das Attribut vertical-align oder das Attribut transform verwenden. 🎜🎜

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie das Div als Ganzes mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!