Zusammenfassung mehrerer Methoden zur Implementierung der vertikalen Zentrierung mit CSS

Im Front-End-Layoutprozess ist es relativ einfach, eine horizontale Zentrierung zu erreichen, die normalerweise durch margin:0 auto; und übergeordnetes Element text-align: center; erreicht werden kann. Es ist jedoch nicht so einfach, eine vertikale Zentrierung zu erreichen. Im Folgenden werde ich Ihnen einige Methoden vorstellen, die ich in meiner Arbeit zur vertikalen Zentrierung verwende.

1. Zeilenhöhe ist gleich Höhe/nur Zeilenhöhe festlegen

Diese Methode eignet sich besser zum Zentrieren von Text. Der Kern besteht darin, die Zeilenhöhe gleich der Höhe des umschließenden Felds einzustellen oder die Zeilenhöhe einzustellen, ohne die Höhe festzulegen. Diese Methode eignet sich für Szenen, in denen Text zentriert und die Höhe festgelegt ist. Sie ist praktisch und nützlich in der Anwendung.

//html
<div Klasse="Mitte">555</div>
 
// CSS
.Mitte{
  Höhe: 50px;
  Zeilenhöhe: 50px;
  Hintergrund: rot;
} 

Es ist erwähnenswert, dass

Wenn es sich um ein Inline-Element handelt, müssen Sie das Inline-Element zuerst in einen Inline-Block oder ein Blockelement konvertieren, da es keine Höhe hat.

2. vertikale Ausrichtung: Mitte

Diese Art der Elementzentrierung erfordert, dass das übergeordnete Element eine Zeilenhöhe hat, die seiner eigenen Höhe entspricht, und dass dieses Element ein Inline-Blockelement ist. Nur wenn alle drei Bedingungen erfüllt sind, kann eine vertikale Zentrierung erreicht werden. Der Code lautet wie folgt:

//html
<div Klasse="Haupt">
   <div Klasse="Mitte"></div>
</div>

// CSS
.hauptsächlich {
  Breite: 200px;
  Höhe: 300px;
  Zeilenhöhe: 300px;
  Hintergrund: #dddddd;
}
.Mitte{
  Hintergrund: rot;
  Breite: 200px;
  Höhe: 50px;
  Anzeige: Inline-Block; //oder Anzeige: Inline-Tabelle;
  vertikale Ausrichtung: Mitte;
} 

Es ist zu beachten, dass diese Methode eine feste Zeilenhöhe erfordert und dass die erreichte Zentrierung tatsächlich eine ungefähre Zentrierung und keine echte Zentrierung ist.

3. Absolute Positionierung plus negative Margen

Der Kern dieser Methode besteht darin, zuerst das zu zentrierende Element auf die absolute Positionierung einzustellen und dann seine Oberseite auf 50 % plus den oberen Rand festzulegen, der der negativen Hälfte seiner eigenen Höhe entspricht, um die Zentrierung zu erreichen. Der Vorteil besteht darin, dass die Implementierung einfacher ist, die Höhe des übergeordneten Elements ein Prozentsatz sein kann und die Zeilenhöhe nicht festgelegt werden muss. Der Code lautet wie folgt:

//html
<div Klasse="Haupt">
  <div Klasse="Mitte"></div>
</div>
  
// CSS
.hauptsächlich {
  Breite: 60px;
  Höhe: 10%;
  Hintergrund: #dddddd;
  position: relative; //übergeordnetes Element ist auf relative Positionierung eingestellt}
.Mitte{
  position: absolute; //Auf absolute Positionierung einstellen top: 50%; //Oberster Wert ist 50%
  oberer Rand: -25 %; //Oberen Rand auf die halbe Elementhöhe setzen width: 60px;
  Höhe: 50%;
  Hintergrund: rot;
}

4. Absolute Positionierung plus Rand: automatisch

Zuerst der Code:

//html
<div Klasse="Haupt">
  <div Klasse="Mitte"></div>
</div>
  
// CSS
.hauptsächlich {
  Breite: 60px;
  Höhe: 10%;
  Hintergrund: #dddddd;
  position: relative; //übergeordnetes Element ist auf relative Positionierung eingestellt}
.Mitte{
  Breite: 30%;
  Höhe: 50%;
  position: absolute; //Auf absolute Positionierung einstellen top: 0;
  unten: 0; //Oben und unten auf 0 setzen.
  left: 0; //Wenn left und right ebenfalls auf 0 gesetzt sind, kann sowohl eine horizontale als auch eine vertikale Zentrierung erreicht werden right: 0;
  Rand: automatisch;
  Hintergrund: rot;
}

Der Vorteil dieser Methode besteht darin, dass nicht nur eine vertikale, sondern auch eine horizontale Zentrierung erreicht werden kann. Der Nachteil besteht darin, dass die Box bei schlechtem Netzwerk oder schlechter Leistung möglicherweise nicht direkt an ihrem Platz befestigt werden kann, was zu einer schlechten Benutzererfahrung führt.

5. Flexibles Layout

Mit dem Flex-Layout lässt sich problemlos eine vertikale und horizontale Zentrierung erreichen. Dies bietet viele Vorteile und wird häufig auf mobilen Endgeräten verwendet. Der Nachteil besteht in der schlechten Browserkompatibilität. Der Code lautet wie folgt:

//html
<div Klasse="Haupt">
  <div Klasse="Mitte"></div>
</div>
 
// CSS
.hauptsächlich {
  Breite: 60px;
  Höhe: 10%;
  Hintergrund: #dddddd;
  Anzeige: flex; //Auf flex einstellen
  justify-content: center; // horizontal zentriert align-items: center; // vertikal zentriert}
.Mitte{
  Breite: 30%;
  Höhe: 50%;
  Hintergrund: rot;
} 

Zusammenfassen

Oben finden Sie eine Zusammenfassung mehrerer Methoden, die ich Ihnen vorgestellt habe, um mit CSS eine vertikale Zentrierung zu erreichen. Ich hoffe, dass sie Ihnen hilfreich sein werden. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten!