Давно искал способ вертикально выравнивать div. Не нашел ни одного вменяемого способа, одни костыли — через table, фиксированный height, JavaScript, и т.д. И вот, наконец, инспектируя чужой сайт, случайно заметил что div выровнен вертикально по центру, а костылей в коде вроде как нет. Думаю многим будет полезно.
Решающую роль здесь играет почему-то указанная ниже часть. Без неё не выравнивается:
Но данный способ работает в последних версиях Chrome, Firefox, и IE11. В связи с чем решение считаю идеальным. Спасибо за внимание!
<html>
<head>
<style type="text/css">
.box { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; display: block; text-align: center; overflow: auto; background-color: #999; }
.box:before { display: inline-block; height: 100%; vertical-align: middle; content: ''; }
.dialog { position: relative; display: inline-block; vertical-align: middle; width: 300px; background-color: #FFF; color: #000; padding: 20px; text-align: left; }
</style>
</head>
<body>
<div class="box">
<div class="dialog">Блок по центру!</div>
</div>
</body>
</html>Решающую роль здесь играет почему-то указанная ниже часть. Без неё не выравнивается:
.box:before { content: ''; }Но данный способ работает в последних версиях Chrome, Firefox, и IE11. В связи с чем решение считаю идеальным. Спасибо за внимание!