Вертикальное выравнивание — универсальный метод.

Наконец-то я его нашел. И почему мне раньше это не приходило в голову? Постоянно приходилось изобретать какие-то шаманские штуки с line-height, display: table, vertical-align, top: 50%; margin-top: -XXXpx и прочая и прочая.

И вот недавно, когда мне для одного проекта понадобилось сделать модальные окна произвольной ширины/высоты, я снова озаботился. И как-то сразу мне пришел в голову transform. Не, серьезно, translateY — это именно то, что нужно. Эту штуку поддерживает 83% браузеров (с префиксами, IE — начиная с 9.0).

Короч, делаем так:

position: relative; // или absolute, кому как нравится
top: 50%;
transform: translateY(-50%); // не забывайте про префиксы

И всё. ВСЁЁЁ, ВЫ ПОНИМАЕТЕ, ВСЁЁЁ??!

P.S. Не всё. У родительского элемента высота обязательно должна быть задана отличной от auto. Этот метод работает с чем угодно, но не нужно забывать, что для некоторых случаев есть свои красивые и продуманные методы.

P.P.S. А еще когда-нибудь всеми будет поддерживаться flexbox. Но это когда-нибудь…

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