Skip to content

Instantly share code, notes, and snippets.

@possatti

possatti/centering-div

Created July 24, 2014 03:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save possatti/dacc27971eb1fd50271d to your computer and use it in GitHub Desktop.
Save possatti/dacc27971eb1fd50271d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
centering-div
<html>
<head>
<style>
/*o.v.
big shout out to http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
.container {display: table; height: 100%; position:absolute; overflow: hidden;width:100%;}
.helper {#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;}
.content {#position: relative; #top: -50%;margin:0 auto;width:200px;border:1px solid orange;}
</style>
</head>
<body>
<div class="container">
<div class="helper">
<div class="content">
<p>I'm centered like a boss!</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment