Skip to content

Instantly share code, notes, and snippets.

Last active December 23, 2015 09:49
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Dimension Independent Centred Images - This allows an image to be centered within a parent container of a fixed height no matter what height or width the child image is.
* 1: Arbitrary width.
.parent {
position: relative;
height: 250px;
max-width: 400px; /* 1 */
overflow: hidden;
* Position the image absolutely and then move it's four positions
* 1000000% out of the container. This with an auto margin is the core of the trick.
* Why such a large number? Firefox seems to have issue when using larger images even
* at 100%.
.parent img {
position: absolute;
top: -1000000%;
right: -1000000%;
bottom: -1000000%;
left: -1000000%;
margin: auto;
max-width: 100%;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment