So zentrieren Sie die HTML-Box

Es gibt viele Möglichkeiten, HTML-Boxen zu zentrieren: Horizontale Zentrierung: Stellen Sie den gleichen linken und rechten Rand ein oder verwenden Sie text-align:center. Vertikale Zentrierung: Legen Sie gleiche obere und untere Ränder fest oder verwenden Sie die Eigenschaften „position: absolut“ + „oben/unten“. Horizontale und vertikale Zentrierung: implementiert mit Flexbox-, Grid- oder CSS-Klassen.

So zentrieren Sie eine HTML-Box

Es gibt verschiedene Möglichkeiten, eine Box in HTML zu zentrieren, abhängig von der gewünschten Zentrierung und der von Ihnen verwendeten Layouttechnik.

Horizontal zentrieren

• Verwenden Sie das Attribut margin: margin 属性：在盒子的左右两侧设置相等的 margin 值，使其从容器的边缘居中。
• 使用 text-align 属性：将盒子容器的 text-align 设置为 "center"，然后将盒子设置为 inline-block 或 block 元素。

垂直居中

• 使用 margin-top 和 margin-bottom 属性：在盒子的顶部和底部设置相等的 margin 值，使其从容器的上边缘和下边缘居中。
• 使用 position 属性：将盒子的 position 设置为 "absolute"，然后使用 top 和 bottom 属性使其在垂直方向上居中。

水平和垂直居中

• 使用 flexbox：创建具有 display: flex 属性的容器，然后使用 align-items 和 justify-content 属性在水平和垂直方向上居中盒子。
• 使用 grid：创建具有 display: grid 属性的容器，然后使用 justify-content 和 align-contentSetzen Sie auf der linken und rechten Seite des Felds gleiche margin-Werte ein, um es von der aus zu zentrieren Rand des Behälters.

Verwenden Sie das Attribut text-align: Setzen Sie text-align des Box-Containers auf „center“ und dann die Box auf inline-block code>- oder <code>block-Element.

Vertikal zentriert

🎜🎜🎜Verwenden Sie die Eigenschaften margin-top und margin-bottom: 🎜Setzen Sie oben und unten den gleichen margin-Wert, um ihn vom oberen und unteren Rand des Containers aus zu zentrieren. 🎜🎜🎜Verwenden Sie das Attribut <code>position: 🎜Setzen Sie die position der Box auf „absolut“ und verwenden Sie dann top und bottom Eigenschaft, um es vertikal zu zentrieren. 🎜🎜🎜🎜Horizontal und vertikal zentriert 🎜🎜🎜🎜🎜Verwenden Sie flexbox: 🎜Erstellen Sie einen Container mit dem Attribut display: flex und verwenden Sie dann align-items Die Eigenschaften code> und <code>justify-content zentrieren das Feld horizontal und vertikal. 🎜🎜🎜Verwenden Sie grid: 🎜Erstellen Sie einen Container mit dem Attribut display: grid und verwenden Sie dann justify-content und align-content Die Eigenschaft zentriert das Feld horizontal und vertikal. 🎜🎜🎜🎜CSS-Klassen verwenden 🎜🎜🎜Um den Zentrierungsprozess zu vereinfachen, können Sie eine CSS-Klasse erstellen, die einen Zentrierungsstil enthält, etwa so: 🎜

<code class="css">.centered {
  margin: auto;
  text-align: center;
}</code>

🎜 Sie können diese Klasse dann auf jedes Feld anwenden, das Sie zentrieren möchten. 🎜

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie die HTML-Box. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!