О проблеме вертикального центрирования контента в CSS можно слагать легенды, писать статьи, делать целые сайты...
Даже грустно, что всё это подходит к концу. Ведь теперь у нас есть не только флекс и грид, но и такое простое и понятное align-content.
Да, это свойство с давних пор является базой во flex- и grid-моделях, но начиная с Chrome 123, Firefox 125 и Safari 17.4 поддерживается и в — 🎉 — блочной модели!
.container {
align-content: center;
}
Демо: https://codepen.io/alinaki/pen/ExBzeLW
Но всё же советую пройти по ссылкам в начале поста и посмотреть разные варианты. Ну, вдруг у вас браузеры постарше 🙈
#css #align