So zentrieren Sie CSS

So zentrieren Sie CSS: 1. Für die horizontale Zentrierung können Sie „text-align“ für Elemente auf Blockebene, „margin“ für Elemente auf Blockebene und „position“ und „transform“ für Elemente auf Blockebene verwenden; 2. Für die vertikale Zentrierung können Sie „line-height“ für Inline-Elemente, „flexbox“ für Elemente auf Blockebene und „position“ und „transform“ für Elemente auf Blockebene verwenden.

Im Webdesign ist die Zentrierung eine sehr häufige Anforderung, insbesondere im Layout. CSS bietet verschiedene Methoden zur Zentrierung. Werfen wir einen Blick auf einige der gängigsten Methoden.

1. Horizontale Zentrierung

1. Verwenden Sie das text-align-Attribut (für Elemente auf Blockebene), um den internen Text von Elementen auf Blockebene wie p, h1, h2 und anderen Tags horizontal zu zentrieren. Der Beispielcode lautet wie folgt:

div {

text-align: center;

}


2. Verwenden Sie das Attribut „margin“ (für Elemente auf Blockebene), um Elemente auf Blockebene horizontal zu zentrieren und rechte Ränder auf automatisch, Beispiel Der Code lautet wie folgt:

div {

margin: 0 auto;

}

3 Position und Transformation verwenden (für Elemente auf Blockebene)

Das Positionsattribut und das Transformationsattribut können Um eine horizontale Zentrierung von Elementen auf Blockebene zu erreichen, muss das Positionsattribut auf „absolut“ oder „fest“ gesetzt werden. Verwenden Sie dann das Transformationsattribut, um das Element um 50 % nach links zu verschieben. Der Beispielcode lautet wie folgt:

div {

position: absolute;

left: 50 %;

transform: translatorX(-50 %);

}


2 Vertikale Zentrierung

1. für Inline-Elemente) Das Attribut

line-height kann Inline-Elemente vertikal zentrieren. Setzen Sie einfach den Wert von line-height auf die Höhe des Containers. Der Beispielcode lautet wie folgt:

div {

height: 100px;

line -height: 100px;

}

2. Flexbox verwenden (für Elemente auf Blockebene)

Flexbox ist eine in CSS3 eingeführte Layoutmethode, mit der problemlos eine vertikale Zentrierung von Elementen erreicht werden kann Container, und verwenden Sie dann align-items: center, um das Element vertikal zu zentrieren. Der Beispielcode lautet wie folgt:

.container {

display: flex;

align-items: center;

justify-content: center;

}


3 Verwenden Sie Position und Transformation (für Elemente auf Blockebene)

Positionsattribute und Transformationsattribute können auch eine vertikale Zentrierung des Elements erreichen. Sie müssen das Positionsattribut auf „absolut“ oder „fest“ setzen und dann das Transformationsattribut verwenden, um das Element um 50 % nach oben zu verschieben. Der Beispielcode lautet wie folgt:

div {

position: absolute;

top: 50 %;

transform: translatorY(-50 %);

}


Zusammenfassung:

Die oben genannten sind mehrere Möglichkeiten, eine Zentrierung zu erreichen CSS hat jeweils Vor- und Nachteile, und in verschiedenen Situationen können Sie die geeignete Methode auswählen, um Ihre Ziele zu erreichen. Gleichzeitig unterstützen moderne Browser CSS3 immer besser und die Verwendung des Flexbox-Layouts von CSS3 ist ebenfalls eine sehr praktische Wahl.

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