Как правильно сверстать отступ?

Question

[eugenedrvnk]

Есть блок, в котором началом контента служит h1 и блок должен быть спозиционирован так, дабы что бы этот h1 находился по центру экрана. Какие есть варианты для подобного решения? Единственное, что мне в голове пришло - брать высоту h1, вычитать её из высоты экрана и делить на 2, и получившееся значение задавать верхним паддингом.
Возможно есть какие-то более аккуратные варианты?

Comments

[Виталий Першин]

flex

[eugenedrvnk]

Виталий, после h1 идёт отступ и продолжает идти контент, если делать на флексах - получается такое

[Виталий Першин]

eugenedrvnk, о как.. Если без js то как вариант можно сделать отступ 50% от верха и заголовку добавить translateY(-50%), тогда заголовок будет четко по центру, только вот отступ у контента будет тоже плавающим, но и наездов никаких не будет

[Rustam Bainazarov]

Обычно делается так, как вы и описали. Это очень просто, только нужно заранее просчитать с учётом количества строк:


Более сложные варианты — на JS. Зависит ещё и от разметки сильно.

Answer 1

[hzzzzl]

положить его во флекс контейнер?

Comments

[eugenedrvnk]

Спасибо за ответ, но в вашем примере всё содержимое полностью центрируется, в моей же ситуации этот h1 находится в блоке с контентом и необходимо подобрать такие отступы что бы именно h1 был по центру и после него всё так же продолжал вниз идти контент.

[hzzzzl]

eugenedrvnk, и сверху h1 реально пустота на пол-экрана?
может тогда эту верхушку с Давидом и about поставить с position: absolute, а на блок с контентом margin-top: 50vh

[eugenedrvnk]

hzzzzl, тоже вариант, но здесь всё равно прийдётся брать js'ом высоту h1, и делать маржин уменьшать на половину высоты h1. По всей видимости без джаваскрипта эту штуковину не решить

[hzzzzl]

eugenedrvnk, если мы знаем размер шрифта h1, то можно сделать calc(50vh - размер / 2)
нооо да, это сработает только если h1 в одну строчку

Answer 2

[NikDevNik]

если h1 не фиксированный, то я бы на вашем месте задал паддинги по макету padding: Xpx Xpx Xpx Xpx. Можно подобрать такие, чтобы блок распологался по центру и все.. будут заказчики на вас пшикать, дайте им подумать как будет вести себя контент, если они придумают что-то добавить. Еще идея использовать positons. задать на h1 absolute и стандартные top: 50%; left: 50% и transform