So legen Sie die Boxmitte in CSS fest

In CSS können Sie mehrere Methoden verwenden, um das Feld zu zentrieren: horizontale Zentrierung: Rand: 0, vertikale Zentrierung: Vertikale und vertikale Zentrierung: Anzeige: Flex-Inhalt: Mitte; : center;

Einstellung der Boxmitte in CSS

In CSS gibt es viele Möglichkeiten, die Box zentriert auszurichten.

Horizontale Mitte

• Rand: 0 automatisch;: Dies ist die am häufigsten verwendete Methode, bei der das Feld horizontal an der Mitte des übergeordneten Elements ausgerichtet wird.
• text-align: center;: Richtet den Text nur innerhalb des Felds zentriert aus.

Vertikale Mitte

• vertical-align: middle;: Zentrieren Sie das Feld vertikal, um das übergeordnete Element auszurichten.
• Zeilenhöhe: Stellen Sie die Boxhöhe so ein, dass der Text innerhalb der Box vertikal zentriert ist. (Gilt für eine einzelne Textzeile)
• display: flex; align-items: center; : Verwenden Sie das Flexbox-Layout, um das Feld vertikal auszurichten und das übergeordnete Element auszurichten. (Gilt für mehrzeiligen Text)

Horizontale und vertikale Zentrierung

• Transform: Translate(-50%, -50%);: Verwenden Sie die CSS-Transformation, um das Feld gleichzeitig horizontal und vertikal zu zentrieren .
• display: flex; justify-content: center; align-items: center;: Verwenden Sie das Flexbox-Layout, um die Box gleichzeitig horizontal und vertikal auszurichten.

Beispielcode:

.container {
  width: 200px;
  height: 100px;
  margin: 0 auto;  /* 水平居中 */
  text-align: center;  /* 文本水平居中 */
  vertical-align: middle;  /* 垂直居中 */
}

Das obige ist der detaillierte Inhalt vonSo legen Sie die Boxmitte in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!