Wie zentriere ich einen Container in Bootstrap vertikal: Flexbox vs. Pseudoelement?

So zentrieren Sie einen Container in Bootstrap vertikal

Verwenden des flexiblen Box-Layouts (moderne Methode)

Für moderne Browser: Mit der Flexbox können Sie einen Container vertikal zentrieren Layout:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

Verwendung von ::before Pseudo-Element (Legacy-Methode)

Für ältere Browser können Sie ein ::before Pseudo-Element verwenden -Element, um ein Element voller Höhe zu erstellen, das den Container ausrichtet vertikal:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  height: 100%;
  width: 100%;
  text-align: center;
  font: 0/0 a;
}

.vertical-center:before {
  content: " ";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Zusätzliche Überlegungen

• Um unerwartete Probleme auf kleinen Bildschirmen zu verhindern, können Sie die Höhe des ::before-Pseudos zurücksetzen -element auf auto oder 0.
• Wenn sich um den Container herum Fuß-/Kopfzeilenabschnitte befinden, positionieren Sie diese richtig und fügen Sie einen höheren Z-Indexwert hinzu um sie an der Spitze zu halten.

Das obige ist der detaillierte Inhalt vonWie zentriere ich einen Container in Bootstrap vertikal: Flexbox vs. Pseudoelement?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!