Skip to content

Instantly share code, notes, and snippets.

@kazzkiq
Created January 29, 2014 18:12
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 kazzkiq/8693631 to your computer and use it in GitHub Desktop.
Save kazzkiq/8693631 to your computer and use it in GitHub Desktop.
Final way to centralize liquid element vertical and horizontally (with CSS3)
/*
The world need to know about this.
Most part taken from: http://pt.stackoverflow.com/a/166/1754 (its in portuguese)
IE 9+ , Chrome , Firefox , Opera , iOS 3.2+ , Android 2.1+ , IE Mobile 10+
*/
.centralize-me{
position:absolute; /*fixed works too*/
top:50%;
left:50%;
width:90%; /*can be anything you want, even calc() */
height:90%; /*can be anything you want, even calc() */
overflow:auto; /*this puts scrollers if the content inside this element is bigger then the element itself, you can remove if you want */
/*Here the magic begins*/
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
@kazzkiq
Copy link
Author

kazzkiq commented Jan 29, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment