Center The Html Element On The Screen with Pure CSS

An easy CSS/CSS3 snippet to center any Html element horizontally and vertically in browser screen.

How to use it:

Wrap the Html elements you wish to center in screen.

<div class="container">
<div class="content">
<h1>Resize the window to see it in action.</h1>
...
</div>
</div>

The CSS/CSS3 rules.

body {
margin: 0;
border: 0;
padding: 0;
background-color: #404040;
color: #f0f0f0;
}
div.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
div.content {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
h1 {
margin-top: 0;
}