Detaillierte Erläuterung der CSS-Zentrierungsmethode

CSS-Zentrierung ist ein Problem, mit dem Front-End-Ingenieure häufig konfrontiert sind, und es gehört auch zu den Grundfähigkeiten. Heute hat der Herausgeber die CSS-Zentrierungslösungen zusammengestellt und sortiert. Derzeit gibt es 15 Lösungen, darunter horizontale Zentrierung, vertikale Zentrierung sowie horizontale und vertikale Zentrierung. Wenn welche fehlen, werden sie nacheinander hinzugefügt. Dies kann als Memo betrachtet werden.

1 Horizontal zentrieren

1.1 Horizontal Zentrierung von Inline-Elementen

Verwenden Sie text-align: center, um eine horizontale Zentrierung von Inline-Elementen innerhalb von Elementen auf Blockebene zu erreichen. Diese Methode eignet sich für die horizontale Zentrierung von Inline-Elementen (Inline), Inline-Blöcken (Inline-Block), Inline-Tabellen (Inline-Table) und Inline-Flex-Elementen.

Kerncode:

.center-text {    text-align: center;
 }

1.2 Elemente auf Blockebene werden horizontal zentriert

Durch Ändern des Randes links und des Randes fester- Breite von Elementen auf Blockebene. Stellen Sie rechts auf „Auto“ ein, um Elemente auf Blockebene horizontal zu zentrieren.

Kerncode:

.center-block {  margin: 0 auto;
}

1.3 Elemente auf mehreren Blockebenen werden horizontal zentriert

1.3.1 Verwendung von Inline-Block

Wenn zwei oder mehr Elemente auf Blockebene in einer Zeile vorhanden sind, legen Sie den Anzeigetyp des Elements auf Blockebene auf „inline-block“ und das Attribut „text-align“ des übergeordneten Containers fest, um die mehreren Elemente auf Blockebene horizontal zu zentrieren .

Kerncode:

.container {    text-align: center;
}.inline-block {    display: inline-block;
}

1.3.2 Verwenden Sie display: flex

Verwenden Sie elastisches Layout (Flex), um eine horizontale Zentrierung zu erreichen, wobei justify-content zum Festlegen verwendet wird Elastizität Die Ausrichtung des Boxelements in Richtung der Hauptachse (horizontale Achse). In diesem Beispiel werden die untergeordneten Elemente horizontal und zentriert angezeigt.

Kerncode:

.flex-center {    display: flex;    justify-content: center;
}

2 Vertikale Zentrierung

2.1 Einzeilige Inline (Inline- ) Zentrieren Sie das Element vertikal

, indem Sie die Höhe (height) und die Zeilenhöhe (line-height) des Inline-Elements gleich einstellen und dadurch das Element vertikal zentrieren.

Kerncode:

#v-box {    height: 120px;    line-height: 120px;
}

2.2 Mehrzeilige Elemente werden vertikal zentriert

2.2.1 Tabellenlayout (Tabelle) verwenden

Verwenden Sie Vertical-Align: Mitte des Tabellenlayouts, um eine vertikale Zentrierung untergeordneter Elemente zu erreichen.

Kerncode:

.center-table {    display: table;
}.v-cell {    display: table-cell;    vertical-align: middle;
}

2.2.2 Flex-Layout (flex) verwenden

Flex-Layout verwenden, um eine vertikale Zentrierung zu erreichen, wobei flex-direction: Column die Hauptspalte definiert Achsenrichtung als Hochformat. Da das Flex-Layout in CSS3 definiert ist, gibt es Kompatibilitätsprobleme in älteren Browsern.

Kerncode:

.center-flex {    display: flex;    flex-direction: column;    justify-content: center;
}

2.2.3 Verwendung der „Geisterelement“-Technologie

Verwendung der „Geisterelement“-Technologie (Geisterelement), um eine vertikale Zentrierung zu erreichen, d. h. Platzieren Sie im übergeordneten Container ein Pseudoelement mit einer Höhe von 100 % darin, um den Text und das Pseudoelement vertikal auszurichten und eine vertikale Zentrierung zu erreichen.

Kerncode:

.ghost-center {    position: relative;
}.ghost-center::before {    content: " ";    display: inline-block;    height: 100%;    width: 1%;    vertical-align: middle;
}.ghost-center p {    display: inline-block;    vertical-align: middle;    width: 20rem;
}

2.3 Elemente auf Blockebene sind vertikal zentriert

2.3.1 Elemente auf Blockebene mit fester Höhe

Wir kennen die Höhe und Breite des zentrierten Elements, daher ist das Problem der vertikalen Zentrierung einfach. Eine vertikale Zentrierung kann erreicht werden, indem das Element absolut 50 % von oben positioniert wird und „margin-top“ so eingestellt wird, dass die Hälfte der Elementhöhe nach oben versetzt wird.

Kerncode:

.parent {  position: relative;
}.child {  position: absolute;  top: 50%;  height: 100px;  margin-top: -50px; 
}

2.3.2 Elemente auf Blockebene mit unbekannter Höhe

Wenn die Höhe und Breite des vertikal zentrierten Elements unbekannt sind, können wir verwenden CSS3 Das Transformationsattribut wird um 50 % in die entgegengesetzte Richtung zur Y-Achse versetzt, um eine vertikale Zentrierung zu erreichen. Bei einigen Browsern treten jedoch Kompatibilitätsprobleme auf.

Kerncode:

.parent {    position: relative;
}.child {    position: absolute;    top: 50%;    transform: translateY(-50%);
}

3 Horizontale und vertikale Zentrierung

3.1 Elemente mit fester Breite und Höhe Horizontal und vertikal Zentrierung

übersetzt die Hälfte der Gesamtbreite des Elements durch den Rand, um das Element horizontal und vertikal zu zentrieren.

Kerncode:

.parent {    position: relative;
}.child {    width: 300px;    height: 100px;    padding: 20px;    position: absolute;    top: 50%;    left: 50%;    margin: -70px 0 0 -170px;
}

3.2 Elemente unbekannter Breite und Höhe werden horizontal und vertikal zentriert

2D-Transformation verwenden, sowohl horizontal als auch vertikal. Übersetzt Halbieren Sie Breite und Höhe in die entgegengesetzte Richtung und zentrieren Sie das Element horizontal und vertikal.

Kerncode:

.parent {    position: relative;
}.child {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);
}

3.3 Flex-Layout verwenden

Flex-Layout verwenden, wobei justify-content zum Festlegen oder Abrufen flexibler Boxen verwendet wird elements Die Ausrichtung in Richtung der Hauptachse (horizontale Achse); und die Eigenschaft align-items definiert die Ausrichtung der Flex-Elemente in Richtung der Querachse (vertikale Achse) der aktuellen Zeile des Flex-Containers.

Kerncode:

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

3.4 Verwendung eines Rasterlayouts

Die Verwendung eines Rasters zur Erzielung einer horizontalen und vertikalen Zentrierung weist eine schlechte Kompatibilität auf und wird nicht empfohlen.

Kerncode:

.parent {  height: 140px;  display: grid;
}.child { 
  margin: auto;
}

Demoprogramm:

Democode

3.5 Horizontale und vertikale Zentrierung auf dem Bildschirm

Die horizontale und vertikale Zentrierung auf dem Bildschirm wird sehr häufig verwendet und ist für reguläre Anmelde- und Registrierungsseiten erforderlich. Um eine bessere Kompatibilität zu gewährleisten, muss auch das Tabellenlayout verwendet werden.

Kerncode:

.outer {    display: table;    position: absolute;    height: 100%;    width: 100%;
}.middle {    display: table-cell;    vertical-align: middle;
}.inner {    margin-left: auto;    margin-right: auto; 
    width: 400px;
}

Demoprogramm:

Democode

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der CSS-Zentrierungsmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!