CSS-Layout-Tutorial: So erreichen Sie eine vertikale Zentrierung

<!-- css -->
<Stil>
.Eltern {
  Höhe: 400px;
  Zeilenhöhe: 400px;
  Breite: 400px;
  Rand: 1px durchgehend rot;
  Textausrichtung: zentriert;
}

.Kind {
  Hintergrundfarbe: blau;
  Farbe: #fff;
}
 </Stil>
</Kopf>

<Text>
<!-- html -->
<div Klasse="Eltern">
   <span class="child">CSS-Layout, vertikale Zentrierung</span>
</div>
</body>

<!-- css -->
<Stil>
.Eltern {
  Höhe: 400px;
  Breite: 400px;
  Rand: 1px durchgehend rot;
  Position: relativ;
}

.Kind {
  Breite: 200px;
  Höhe: 100px;
  Zeilenhöhe: 100px;
  Textausrichtung: zentriert;
  Farbe: #fff;
  Hintergrundfarbe: blau;
  /* Setze die vier Richtungen auf 0 und verwende dann den Rand auf Auto, um adaptiv zu zentrieren*/
  Position: absolut;
  oben: 0;
  rechts: 0;
  unten: 0;
  links: 0;
  Rand: automatisch;
}
 </Stil>
</Kopf>

<Text>
<!-- html -->
<div Klasse="Eltern">
  <span class="child">CSS-Layout, vertikale Zentrierung</span>
</div>
</body>

  <!-- css -->
  <Stil>
    .Eltern {
      Höhe: 400px;
      Breite: 400px;
      Rand: 1px durchgehend rot;
      Anzeige: Flex;
    }

    .Kind {
      Breite: 200px;
      Höhe: 100px;
      Zeilenhöhe: 100px;
      Textausrichtung: zentriert;
      Farbe: #333;
      Hintergrundfarbe: gelb;
      Rand: automatisch;
  }
 </Stil>
</Kopf>

<Text>
 <!-- html -->
  <div Klasse="Eltern">
    <span class="child">CSS-Layout, vertikale Zentrierung</span>
  </div>
</body>

  <!-- css -->
  <Stil>
    .Eltern {
      Höhe: 400px;
      Breite: 400px;
      Rand: 1px durchgehend rot;
      Position: relativ;
    }

    .Kind {
      Breite: 200px;
      Höhe: 100px;
      Zeilenhöhe: 100px;
      Textausrichtung: zentriert;
      Farbe: #fff;
      Hintergrundfarbe: grün;
      Position: absolut;
      oben: 50 %;
      links: 50%;
      transformieren: übersetzen(-50 %, -50 %);
    }
  </Stil>
</Kopf>

<Text>
  <!-- html -->
  <div Klasse="Eltern">
    <span class="child">CSS-Layout, vertikale Zentrierung</span>
  </div>
</body>

 <!-- css -->
 <Stil>
    .Eltern {
      Höhe: 400px;
      Breite: 400px;
      Rand: 1px durchgehend rot;
      Anzeige: Flex;
      Inhalt ausrichten: zentriert; /* horizontal */
      align-items: center; /* vertikal */
    }

    .Kind {
      Breite: 200px;
      Höhe: 100px;
      Farbe: Schwarz;
      Hintergrundfarbe: orange;
    }
  </Stil>
</Kopf>

<Text>
  <!-- html -->
  <div Klasse="Eltern">
    <span Klasse="Kind"></span>
  </div>
</body>

 <!-- css -->
 <Stil>
    .Eltern {
      Höhe: 400px;
      Breite: 400px;
      Rand: 1px durchgehend rot;
      Anzeige: Tabellenzelle;
      Textausrichtung: zentriert;
      vertikale Ausrichtung: Mitte;
    }

    .Kind {
      Breite: 200px;
      Höhe: 100px;
      Farbe: #fff;
      Hintergrundfarbe: blau;
      Anzeige: Inline-Block; /* Einstellungen für untergeordnete Elemente inline oder Inline-Block*/
    }
  </Stil>
</Kopf>

<Text>
  <!-- html -->
  <div Klasse="Eltern">
    <span Klasse="Kind"></span>
  </div>
</body>