Skip to content

Instantly share code, notes, and snippets.

@maxxcrawford
Created January 17, 2014 17:25
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 maxxcrawford/8477537 to your computer and use it in GitHub Desktop.
Save maxxcrawford/8477537 to your computer and use it in GitHub Desktop.
An update to a method found on css-tricks.com to center items within each other without using table positioning. Source: http://css-tricks.com/centering-in-the-unknown/
.block:before {
border: none;
width: 0;
}
/* This parent can be any width and height */
.block {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 99%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment