Кто работает с CSS сталкивался с тем, как сложно выполнить вертикальное выравнивание блоков и элементов с текстом. Использовались разные уловки, однако теперь благодаря CSS3 Transform, мы можем решить эту проблему более элегантно:
1 2 3 4 5 6 7 | .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } |
Браузеры, которые поддерживают CSS3 Transform: Chrome 4, Opera 10, Safari 3, Firefox 3, и Internet Explorer 9.
See the Pen gbwdjL by Dmitry (@xozblog) on CodePen.
Источник статьи/урока: https://xozblog.ru
По материалам: http://www.hongkiat.com/blog/simple-css-snippets/