Skip to content

Instantly share code, notes, and snippets.

@harisrozak

harisrozak/centering-element.html

Last active August 29, 2015 14:16
Show Gist options
  • Save harisrozak/e591c7b6258e34d139aa to your computer and use it in GitHub Desktop.
Save harisrozak/e591c7b6258e34d139aa to your computer and use it in GitHub Desktop.
Download ZIP
CSS :: A Briliant Way To Centering An Element
Raw
centering-element.html
<!-- Source: https://css-tricks.com/centering-in-the-unknown -->
<html>
<head>
<style>
.block {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
margin: 20px;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.5em; /* Adjusts for spacing */
/* For visualization
background: #808080; width: 5px;
*/
}
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
margin-left: 0.25em; /* Balancing :before spacing */
}
</style>
</head>
<body>
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Tittle</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment