Skip to content

Instantly share code, notes, and snippets.

@0632347878

0632347878/Vertical align

Created October 20, 2016 20:53
Show Gist options
  • Save 0632347878/a19b61794b29b8cca15282b70ce819f6 to your computer and use it in GitHub Desktop.
Save 0632347878/a19b61794b29b8cca15282b70ce819f6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Vertical align
<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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment