Skip to content

Instantly share code, notes, and snippets.

@rnmp rnmp/index.html
Created Mar 25, 2013

Embed
What would you like to do?
A CodePen by Rolando Murillo. Vertical and horizontal centering - No width required!
<h1 class="center-x">X</h1>
<h1 class="center-y">Y</h1>
<h1 class="center-xy">XY</h1>
* { margin: 0; padding: 0; }
h1 {
font-family: 'gill sans';
font-weight: normal;
text-transform: uppercase;
color: white;
background: red;
}
.center-xy, .center-x, .center-y {
position: absolute;
}
.center-x, .center-xy {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.center-y, .center-xy {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.center-xy {
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.