Detaillierte Codebeispiele zu sieben Methoden zur vertikalen Zentrierung mit CSS

Wenn wir ein Layout bearbeiten, verwenden wir normalerweise horizontale und vertikale Zentrierung, um es zu gestalten. Die horizontale Zentrierung ist einfach zu handhaben. Sie müssen nur margin:0 auto; oder text-align:center; festlegen, um das Problem der horizontalen Zentrierung einfach zu lösen. Das problematischste Ausrichtungsproblem war jedoch schon immer die lästige Einstellung der „vertikalen Zentrierung“. Im Folgenden werden sieben Möglichkeiten vorgestellt, wie Sie die vertikale Zentrierung einfach mit CSS verwenden können.

Sieben Möglichkeiten zur vertikalen Zentrierung

1. Zeilenhöhe festlegen
2. Hinzufügen von Pseudoelementen
3. calc dynamische Berechnung
4. Verwenden Sie einen Tisch oder einen Spieltisch
5. verwandeln
6. Absolute Positionierung
7. Verwenden von Flexbox

Zeilenhöhe festlegen

Das Festlegen der Zeilenhöhe ist die einfachste Möglichkeit, etwas vertikal zu zentrieren. Dies funktioniert für „einzeilige“ „Inline-Elemente“ (Inline, Inline-Block), wie z. B. einen einzeiligen Titel oder ein Div, das auf das Inline-Block-Attribut festgelegt wurde. Wenn Sie die Zeilenhöhe auf denselben Wert wie die Höhe festlegen, werden die Inline-Elemente des Inhalts vertikal zentriert. Da es sich um die Zeilenhöhe handelt, wird die Hälfte der Zeilenhöhe oben und unten zu den Inline-Elementen hinzugefügt, sodass sie vertikal zentriert sind! Daraus können wir jedoch erkennen, warum wir einzeilige Inline-Elemente benötigen, denn bei mehreren Zeilen wird der Abstand zwischen der zweiten und der ersten Zeile zu groß, was nicht der erwartete Effekt ist. CSS-Beispiel:

.div0
{  
Breite: 200px;  
Höhe: 150px;  
Rand: 1px durchgezogen #000;  
Zeilenhöhe: 150px;  
Textausrichtung: zentriert;
}
.redbox
{  
Anzeige: Inline-Block; 
 Breite: 30px; 
 Höhe: 30px; 
 Hintergrund:#c00;}

Pseudoelemente hinzufügen (::before, ::after)

Die erste Methode ist die einfachste (geeignet für einzeilige Titel), funktioniert aber nur für eine einzelne Zeile. Wenn wir also mehrzeilige Elemente vertikal zentrieren möchten, müssen wir Pseudoelemente verwenden. Zuvor möchte ich zunächst die Eigenschaft „vertical-align“ in CSS erklären. Obwohl diese Eigenschaft eine vertikale Zentrierung darstellt, bedeutet dies, dass alle Elemente innerhalb des Elements vertikal zueinander zentriert sind und nicht vertikal relativ zur Höhe des äußeren Rahmens zentriert sind. (Das folgende CSS erzeugt diese vertikale Zentrierung)

.div0{
  Breite: 200px;
  Höhe: 150px;
  Rand: 1px durchgezogen #000;
  Textausrichtung: zentriert;
}
.redbox{
  Breite: 30px;
  Höhe: 30px;
  Hintergrund: #c00;
  Anzeige: Inline-Block;
  vertikale Ausrichtung: Mitte;
}
.greenbox{
  Breite: 30px;
  Höhe: 60px;
  Hintergrund: #0c0;
  Anzeige: Inline-Block;
  vertikale Ausrichtung: Mitte;
}
.bluebox{
  Breite: 30px;
  Höhe: 40px;
  Hintergrund: #00f;
  Anzeige: Inline-Block;
  vertikale Ausrichtung: Mitte;
}

Wenn also ein Block eine Höhe von 100 % erreicht, werden die anderen Blöcke wirklich vertikal zentriert.

.greenbox{
  Breite: 30px;
  Höhe: 100 %;
  Hintergrund: #0c0;
  Anzeige: Inline-Block;
  vertikale Ausrichtung: Mitte;
}

Aber wir können nicht jedes Mal, wenn wir es vertikal zentrieren möchten, ein komisches Div hinzufügen! Daher müssen wir die „Pseudoelemente“ verwenden und ::before und ::after nutzen, um Divs in den Hebel einzufügen und die Höhe dieses „Pseudo“-Divs auf 100 % setzen, damit andere Divs problemlos zentriert werden können. Aber aber aber! Denken Sie daran, die Anzeige von div auf Inline-Block einzustellen. Schließlich ist vertical-align: middle für Inline-Elemente und div selbst ist ein Block, also müssen Änderungen vorgenommen werden!

.div0::vor{
  Inhalt:'';
  Breite: 0;
  Höhe: 100 %;
  Anzeige: Inline-Block;
  Position: relativ;
  vertikale Ausrichtung: Mitte;
  Hintergrund: #f00;
}

calc dynamische Berechnung

Wenn Sie dies sehen, haben Sie möglicherweise Fragen. Wenn mein Div heute ein Block sein muss, wie kann ich es vertikal zentrieren? Zu diesem Zeitpunkt müssen wir die einzigartige dynamische Berechnungsfunktion von CSS verwenden. Wir müssen nur das Top-Attribut des zu zentrierenden Divs auf einen Abstand von „50 % der äußeren Rahmenhöhe + 50 % der Div-Höhe“ vom oberen Rand einstellen, um eine vertikale Zentrierung zu erreichen. Der Grund, warum margin-top nicht verwendet wird, liegt darin, dass margin relativ zur horizontalen Breite ist, sodass top verwendet werden muss, um korrekt zu sein.

.div0{
  Breite: 200px;
  Höhe: 150px;
  Rand: 1px durchgezogen #000;
}
.redbox{
  Breite: 30px;
  Höhe: 30px;
  Hintergrund: #c00;
  schweben: links;
  oben: berechnen (50 % – 15 Pixel);
  Rand links: berechnet (50 % – 45 Pixel);
}
.greenbox{
  Breite: 30px;
  Höhe: 80px;
  Hintergrund: #0c0;
  schweben: links;
  oben: berechnen (50 % – 40 Pixel);
}
.bluebox{
  Breite: 30px;
  Höhe: 40px;
  Hintergrund: #00f;
  schweben: links;
  oben: berechnen (50 % – 20 Pixel);
}

Verwenden Sie einen Tisch oder einen Spieltisch

Manche Leute werden vielleicht feststellen, dass es ganz einfach ist, eine vertikale Zentrierung im DOM zu erreichen, wie sie häufig in HTML-Tabellen verwendet wird. Alles, was Sie brauchen, ist eine Zeile „vertical-align: middle“. Warum? Der Hauptgrund ist, dass die Anzeige der Tabelle eine Tabelle ist, während die Anzeige von td eine Tabellenzelle ist. Daher können wir zusätzlich zur direkten Verwendung der Tabelle auch die Anzeige des übergeordneten Elements des Elements so ändern, dass sie vertikal zur Tabellenzelle zentriert ist, was leicht zu erreichen ist. Das Ändern der Anzeige verursacht jedoch manchmal auch einen Ketteneffekt auf andere Stilattribute, sodass Sie bei der Verwendung vorsichtiger sein müssen.

HTML:

<Tabelle>
    <tr>
        <td>
            <div>Tabelle vertikal zentriert</div>
        </td>
    </tr>
</Tabelle>
<div Klasse="wie-Tabelle">
    <div>Falsche Tabelle vertikal zentriert</div>
</div>

CSS:

.like-Tabelle{
    Anzeige: Tabellenzelle;
}
td,
.like-Tabelle{
    Breite: 150px;
    Höhe: 100px;
    Rand: 1px durchgezogen #000;
    vertikale Ausrichtung: Mitte;
}
td div,
.like-table div{
    Breite: 100px;
    Höhe: 50px;
    Rand: 0 automatisch;
    Farbe: #fff;
    Schriftgröße: 12px;
    Zeilenhöhe: 50px;
    Textausrichtung: zentriert;
    Hintergrund: #c00;
}
.like-table div{
    Hintergrund: #069;
} 

verwandeln

Transform ist ein neues Attribut von CSS3, das hauptsächlich die Verformung, Drehung und Verschiebung von Elementen steuert. Durch die Verwendung von translateY in transform (Ändern der vertikalen Verschiebung, wenn Prozent als Einheit verwendet wird, basiert sie auf der Länge und Breite des Elements selbst) in Kombination mit dem Top-Attribut des Elements selbst können Sie den Effekt der vertikalen Zentrierung erzielen. Worauf Sie achten müssen, ist, dass das untergeordnete Element mit position:relative hinzugefügt werden muss, da es sonst keinen Effekt gibt.

.use-transform{
    Breite: 200px;
    Höhe: 200px;
    Rand: 1px durchgezogen #000;
}
.use-transform div{
    Position: relativ;
    Breite: 100px;
    Höhe: 50px;
    oben: 50 %;
    transformieren: übersetzenY(-50%);
    Hintergrund: #095;
} 

Absolute Positionierung

Die absolute Positionierung ist position:absolute in CSS, das die absolute Position zur Angabe verwendet. Die Methode der vertikalen Zentrierung unterscheidet sich jedoch von unserer herkömmlichen absoluten Position. Dabei werden die oberen, unteren, linken und rechten Werte auf 0 gesetzt und dann margin:auto verwendet, um die vertikale Zentrierung zu erreichen. Es ist jedoch zu beachten, dass bei untergeordneten Elementen mit absoluter Positionierung die Position ihres übergeordneten Elements als relativ angegeben werden muss! Darüber hinaus überdecken sich absolut positionierte Elemente gegenseitig, sodass es bei vielen Inhaltselementen zu Problemen kommen kann.

.use-absolute{
    Position: relativ;
    Breite: 200px;
    Höhe: 150px;
    Rand: 1px durchgezogen #000;
}
.use-absolute div{
    Position: absolut;
    Breite: 100px;
    Höhe: 50px;
    oben: 0;
    rechts:0;
    unten: 0;
    links: 0;
    Rand: automatisch;
    Hintergrund: #f60;
} 

Verwenden von Flexbox

Mit den Eigenschaften „align-items“ oder „align-content“ können Sie ganz einfach den Effekt der vertikalen Zentrierung erzielen.

.use-flexbox{
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
    Breite: 200px;
    Höhe: 150px;
    Rand: 1px durchgezogen #000;
}
.use-flexbox div{
    Breite: 100px;
    Höhe: 50px;
    Hintergrund: #099;
} 

Oben sind einige Methoden zur vertikalen Zentrierung aufgeführt. Da bei der vertikalen Zentrierung häufig das Anzeigeattribut geändert wird, hat dies häufig Auswirkungen auf das Layout. Wenn beispielsweise Flexbox verwendet wird, wo Flexbox nicht verwendet werden sollte, Table verwendet wird, wo Table nicht verwendet werden sollte, und Inline-Block verwendet wird, wo Inline-Block nicht verwendet werden sollte, müssen Sie viele andere Positionierungsstile schreiben, um dies später zu korrigieren, was ein bisschen so ist, als würde man den Karren vor das Pferd spannen. Wie Sie diese CSS-Methoden zur vertikalen Zentrierung verwenden, hängt daher von Ihrer Layoutstruktur ab und Sie müssen sie flexibel verwenden!

Zusammenfassen

Oben finden Sie eine ausführliche Erläuterung der sieben Methoden zur Implementierung der vertikalen Zentrierung mit CSS, die ich Ihnen vorgestellt habe. Ich hoffe, dass sie Ihnen hilfreich sein werden. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten!