CSS ist eine Sprache für Webdesign und wird häufig für das Layout und die Gestaltung von Webseiten verwendet. Beim Webdesign besteht ein sehr häufiges Problem darin, ein von oben nach unten zentriertes Layout zu erreichen. In diesem Artikel werden verschiedene Methoden in CSS vorgestellt, mit denen Sie auf einfache Weise den Effekt der Zentrierung von oben und unten erzielen können.
Methode 1: Verwenden Sie display:flex
display:flex ist eine neue Layoutmethode in CSS3, mit der schnell verschiedene komplexe Layouteffekte erzielt werden können. Es kann auch verwendet werden, um den Effekt einer Zentrierung der Ober- und Unterseite zu erzielen.
HTML-Code:
<div class="parent"> <div class="child"> 这是一段文字。 </div> </div>
CSS-Code:
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 400px;
}
.child {
text-align: center;
}Methodenanalyse:
Verwenden Sie display:flex, um nach oben zu gelangen und nach unten Zum Zentrieren müssen Sie zunächst das übergeordnete Element auf Flex-Layout einstellen und dann die Eigenschaften justify-content:center und align-items:center festlegen, um horizontale bzw. vertikale Zentrierungseffekte zu erzielen.
Im obigen Code ist die Höhe des übergeordneten Elements auf 400 Pixel festgelegt, die nach Bedarf angepasst werden kann. Das text-align:center-Attribut von untergeordneten Elementen kann den Textinhalt horizontal zentrieren.
Methode 2: Verwenden Sie position:absolute
Mit position:absolute kann auch der Effekt der Zentrierung von Ober- und Unterseite erzielt werden. Es ist jedoch zu beachten, dass diese Methode für Elemente mit bekannter Höhe geeignet ist, da die Eigenschaften „margin-top“ und „margin-bottom“ des Elements festgelegt werden müssen.
HTML-Code:
<div class="parent"> <div class="child"> 这是一段文字。 </div> </div>
CSS-Code:
.parent {
position: relative;
height: 400px;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}Methodenanalyse:
Verwenden Sie Position: absolut, um nach oben zu gelangen und nach unten Zum Zentrieren müssen Sie zunächst das übergeordnete Element auf position:relative und dann das Positionsattribut des untergeordneten Elements auf „absolut“ festlegen, damit das untergeordnete Element relativ zum übergeordneten Element positioniert werden kann. Als nächstes verschieben Sie den oberen Rand des untergeordneten Elements mit top:50% in die Mitte des übergeordneten Elements. Sie müssen jedoch noch die Position des untergeordneten Elements anpassen. Sie können in der Transformation translatorY(-50%) verwenden Um dies zu erreichen, wird das Element um 50 % seiner Höhe nach oben verschoben, wodurch ein Zentrierungseffekt von oben nach unten erzielt wird.
Es ist zu beachten, dass die Höhe des übergeordneten Elements im obigen Code nur zu Demonstrationszwecken auf 400 Pixel festgelegt ist. In tatsächlichen Anwendungen muss sie entsprechend der tatsächlichen Situation angepasst werden.
Methode 3: Table-Cell verwenden
In CSS ist Table-Cell eine Tabellenzellen-Layoutmethode, die zwar nicht sehr häufig verwendet wird, aber genauere Ergebnisse erzielen kann .Layout.
HTML-Code:
<div class="parent"> <div class="child"> 这是一段文字。 </div> </div>
CSS-Code:
.parent {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 400px;
}
.child {
display: inline-block;
vertical-align: middle;
}Methodenanalyse:
Verwenden Sie die Tabellenzelle, um nach oben zu gelangen und nach unten Zum Zentrieren müssen Sie das Anzeigeattribut des übergeordneten Elements auf table-cell und die Attribute text-align:center und Vertical-align:middle festlegen, um horizontale bzw. vertikale Zentrierungseffekte zu erzielen. Es ist zu beachten, dass die Höhe des übergeordneten Elements festgelegt werden muss, da sonst eine Zentrierung oben und unten nicht erreicht werden kann.
Das Anzeigeattribut des untergeordneten Elements muss auf „inline-block“ gesetzt sein, und das Attribut „vertikal-align:middle“ muss ebenfalls so festgelegt sein, dass das untergeordnete Element relativ zum übergeordneten Element vertikal zentriert ist. Der Vorteil dieser Methode besteht darin, dass sie eine präzisere Anordnung ermöglicht und für eine Vielzahl von Elementen mit bekannten Höhen geeignet ist.
Zusammenfassend lässt sich sagen, dass es viele Möglichkeiten gibt, den oberen und unteren Zentrierungseffekt zu erzielen, und auch die anwendbaren Situationen sind unterschiedlich. Sie können die geeignete Implementierungsmethode basierend auf den spezifischen Anforderungen auswählen.
Das obige ist der detaillierte Inhalt vonWie man in CSS nach oben und unten zentriert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
