Wie kann ich mithilfe von CSS ein Objekt innerhalb seines übergeordneten Elements vertikal zentrieren?

Um dieses Problem anzugehen, wurden im Laufe der Jahre verschiedene Methoden mit unterschiedlichem Wirkungsgrad und unterschiedlicher Browserunterstützung eingesetzt. Einer der unkompliziertesten Ansätze ist die Eigenschaft „Vertical-Alignment“, die jedoch gewisse Einschränkungen aufweist und möglicherweise nicht immer das gewünschte Ergebnis liefert.

Eine zuverlässigere Lösung für moderne Browser ist die Implementierung von Flexbox, einem leistungsstarken CSS-Modul das vereinfacht das Layout von Webseiten. Indem Sie display:flex dem übergeordneten Element und align-items:center dem untergeordneten Element zuweisen, können Sie das

#Login {
    display: flex;
    align-items: center;
}