So erreichen Sie eine vertikale Zentrierung in CSS

In der Frontend-Entwicklung ist die vertikale Zentrierung von Elementen eine sehr häufige Anforderung. Für einige Anfänger kann dies eine sehr problematische Sache sein. Es gibt jedoch tatsächlich viele Möglichkeiten, mit CSS eine vertikale Zentrierung zu erreichen. Nachfolgend stellen wir einige der praktischeren Methoden vor.

Methode 1: Absolute Positionierung + Rand:auto

Dies ist eine relativ häufige Methode, bei der der obere und linke Wert sowie der Rand festgelegt werden auto, um eine vertikale Zentrierung zu erreichen.

Zuerst müssen Sie das zu zentrierende Element mithilfe der absoluten Positionierung positionieren:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 其它样式 */
}

Dann stellen Sie den Rand auf „Auto“, um eine horizontale Zentrierung zu erreichen:

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  /* 其它样式 */
}

# 🎜🎜#Der Vorteil dieser Methode ist, dass sie relativ einfach zu verstehen und umzusetzen ist und zudem eine sehr gute Kompatibilität aufweist. Beachten Sie jedoch, dass dies nur funktioniert, wenn die Höhe des Elements bekannt ist, das Sie vertikal zentrieren möchten.

Methode 2: Flex-Layout

Flex-Layout ist ein neu hinzugefügter Layoutmodus in CSS3. Es erleichtert die vertikale Zentrierung.

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  /* 其它样式 */
}

Der Vorteil dieser Methode ist, dass sie sehr bequem und intuitiv ist und ihre Kompatibilität relativ gut ist. Es ist jedoch zu beachten, dass einige Kompatibilitätsverarbeitungen hinzugefügt werden müssen, wenn die Kompatibilität mit älteren Browserversionen erforderlich ist.

Methode Drei: Tabellenlayout

Tabellenlayout ist ebenfalls eine ältere CSS-Layoutmethode, mit der auch eine vertikale Zentrierung erreicht werden kann.

.parent {
  display: table;
  height: 100%;
}

.child {
  display: table-cell;
  vertical-align: middle;
  /* 其它样式 */
}

Der Vorteil dieser Methode ist, dass sie auch sehr kompatibel und einfach umzusetzen ist. Es ist jedoch zu beachten, dass es nicht für alle Szenarien geeignet ist. Wenn eine hohe Anpassungsfähigkeit und Flexibilität erforderlich sind, kann es zu Problemen kommen.

Methode 4: Zeilenhöhe

Es gibt auch eine relativ einfache Methode, nämlich die Verwendung von Zeilenhöhe, um eine vertikale Zentrierung zu erreichen.

.parent {
  height: 300px; /* 定义容器高度 */
  line-height: 300px; /* 容器高度与line-height相同，使文本垂直居中 */
  text-align: center; /* 水平居中 */
}

.child {
  display: inline-block; /* 行内块级元素 */
  vertical-align: middle; /* 垂直居中 */
  /* 其它样式 */
}

Der Vorteil dieser Methode ist, dass sie sehr einfach ist und eine gute Kompatibilität aufweist. Es ist jedoch zu beachten, dass dies nur für Inline-Elemente oder Inline-Blockelemente und nur für vertikal zentrierte Textszenarien gilt.

Zusammenfassung

Oben werden einige gängige CSS-Methoden vorgestellt, um eine vertikale Zentrierung zu erreichen. Verschiedene Methoden eignen sich für unterschiedliche Szenarien und müssen entsprechend den tatsächlichen Anforderungen ausgewählt werden. Beachten Sie auch, dass manchmal eine Kombination verschiedener Methoden erforderlich sein kann, um eine vertikale Zentrierung zu erreichen. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, die vertikale Zentrierung einfacher zu erreichen.

Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine vertikale Zentrierung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!