Kann ich ein DIV mit „margin: auto' vertikal zentrieren?

Vertikales Ausrichten eines DIV mit Rand: automatisch

Frage:

Ist es möglich, ein DIV vertikal mit Rand auszurichten? :auto auto;? Warum funktioniert „vertikal-align:middle“ nicht? Arbeit?

Antwort:

Bezüglich Marge:

Leider margin:auto auto; erreicht keine vertikale Zentrierung. Ränder gelten nicht für Elemente auf Blockebene wie DIVs für die vertikale Ausrichtung. Daher sind margin:top:auto und margin-bottom:auto unwirksam.

Bezüglich Vertical-align:middle;:

vertical-align:middle; gilt nur für Inline-Elemente, nicht für Elemente auf Blockebene wie DIVs.

Problemumgehung:

Da es nicht möglich ist, ein DIV mithilfe von Rändern vertikal zu zentrieren, gibt es eine Problemumgehungslösung wird empfohlen. Ein Ansatz, der gut funktioniert, ist die Verwendung verschachtelter Elemente in einem tabellenähnlichen Container:

.container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}

.helper {
  position: absolute;
  top: 50%;
  display: table-cell;
  vertical-align: middle;
}

.content {
  position: relative;
  top: -50%;
  margin: 0 auto;
  width: 200px;
  border: 1px solid orange;
}

<div class="container">
  <div class="helper">
    <div class="content">
      <p>stuff</p>
    </div>
  </div>
</div>

Das obige ist der detaillierte Inhalt vonKann ich ein DIV mit „margin: auto' vertikal zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!