Css. Как отцентровать по вертикали блок внутри абсолютно-позиционированного блока?


Вопрос вертикального выравнивания в CSS часто вызывает проблемы. Особенно они актуальны при необходимости выровнять блок внутри абсолютно-позиционированного блока. Но есть простое решение, о котором сейчас и пойдет речь.

Итак, решение достатоно простое, но не очевидное. Итак.
CSS:

.valign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* vendor prefixes omitted due to brevity */
}

HTML:

test

Решение было найдено здесь.

Это решение круто помогло на одной из верстаемых страниц — поэтому в его работоспособности можете не сомневаться. Удачи!

, ,

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *