A Szent Grál nyomában – függőleges középre rendezés CSS-ben

Három sor:

.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}

A posztban ugyan azt írják, hogy a szülő elemnek nem kell magasságot adni, de nekem a body, html tagekre is rá kellett raknom a height: 100%;-ot, hogy működjön. Hasonló dolgot flexbox-szal oldottam meg. Ez is ugyanúgy megy, csak ott előbb a szülőn létre kell hozni a flex kontextust, az alábbi példában a wrapper osztály:

body, html { height: 100%; }

.wrapper {
display: flex;
align-items: center; /* centers vertically */
justify-content: center; /* centers horizontally */
width: 100%;
height: 100%;
}

Ez után a wrapper alatti első szintű gyermekek center center pozícióban héderelnek majd.