Skip to content

Instantly share code, notes, and snippets.

@dibakarjana
Created August 12, 2013 20:53
Show Gist options
  • Save dibakarjana/6215112 to your computer and use it in GitHub Desktop.
Save dibakarjana/6215112 to your computer and use it in GitHub Desktop.
A CodePen by Dibakar Jana. Percentage sized and still centered - Translate() has to be used instead of negative top margin, because that is based on width which doesn't work.
<div>
Percentage sized and still centered.
</div>
body {
background: #900;
}
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/*
This doesn't work
margin-left: -25%;
margin-top: -25%;
*/
width: 40%;
height: 50%;
padding: 20px;
background: red;
color: white;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment