Centre images and elements within a fixed ratio responsive div

In this tutorial I'll teach you how to create a responsive html element, that maintains it's aspect ratio as it resizes, and how to center an image within it. I'll also show you how to center any element (with a known width).

Making the Ratio Maintaining div

To begin we will create our parent div, this will hold all the other gubbins that make the div maintian its width to height ratio.

<div class="ratio">

</div>

And it's corresponding css: 

.ratio{
    overflow: hidden;
    position: relative;
    display: inline-block;
}

Next we'll add the div that will maintain the parent div's aspect ratio as it resizes. As this div will purely there to set the height of the parent div, and won't contain anything, I'll give this div a class of dummy.

<div class="ratio">
    <div class="dummy"></div>
</div>

I want this div to maintain an aspect ratio of 16:9 (the same as widescreen HD video) so I can work this out with this simple equation: (9/16) x 100 which gives me 56.25%

.dummy{
    display: block;
    margin-top:56.25%;
}

The margin-top is what will force the parent div to maintain a height of 56.25% of it's height.

Next we'll add the div that will contain the image:

<div class="ratio">
    <div class="dummy"></div>
    <div class="element">

    </div>
</div>

And it's CSS:

.element{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

By giving the element div a position of absolute, and setting it's top, right, bottom and left values to 0, we have effectiely made this div inherit the width and height of the parent (.ratio) element. The overflow:hidden ensures that no content will spill out of this element, and give the illusion of the contained image being cropped to size.

Adding and Centring the Image

Next, we want to add out image we want to be centred and cropped. 

<div class="ratio">
    <div class="dummy"></div>
    <div class="element">
        <img src="/path/to/your/image.jpg" />
    </div>
</div>

And then we'll add the magic CSS that centre's the image:

.ratio img{
    width:100%;
    position:absolute;
}

.ratio img:empty{
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

The first part of css here makes the image as wide as it's parent element and makes sure we can position it as we please. The second piece is what actually centers it.

The top:50% and left 50% moves the image by its top left corner 50% of the with and height respectively of the parent div. The css 2D transforms after then move the image back 50% of the image's with and height. To see how this works, try adding just the top:50% and left:50% and seeing where the image moves to, and then adding the rest and seeing it's effect.

The benefit of using this method to center an image over setting it as a background image, and using background position to centre it, is that you get better SEO and you can add alt and title tags to your image.

However, this method is only compatible on Internet Explorer version 9 and higher, so you may want to add some JavaScript fall back if you need support for later  versions of IE.

Centring an Element Horizontally AND Vertically

Let's assume you have a basic HTML structure set up like this:

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

    <div class="centreMe">
        
    </div>

</body>
</html>

With these styles:

.centreMe{
    width:800px;
    height:450px;
    background:red;
}

We could centre the .centreMe div horizontally by giving it margin:0 auto;. However, we want to vertically centre this div also, so this doesn't really cut the mustard.

Instead we're going to use a method similar to what we used on the image above, but this method is compatible all browsers, even down to IE7 (and maybe lower, I haven't checked).

So first of all we want to make sure the body has a position of relative:

body{
    position:relative;
}

This means we will be able to position our div relatively within the body. We then want to give the .centreMe div  these additional styles:

.centreMe{
    width:800px;
    height:450px;
    background:red;
    position:absolute;
    top:50%;
    left:50%;
}

As you can see the div isn't quite in the right place yet, so like before, we want to bring it back left 50% of it's own width, and back up 50% of it's own height. This time however we wont be using css 2d transforms as to maintain compatibility for older browsers. Beacause we know the dimensions of the div we want to centre, we can use margin instead:

.centreMe{
    width:800px;
    height:450px;
    background:red;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-225px;
    margin-left:-400px;
}

Half of 450px is 225px and half of 800px is 400px, so we tell the .centreMe div to go up -225px and left -400px, bringing it smack bang into the centre of the window.

Conclusion

It's suprising how often I use these methods day to day in web design, and how often you will need to centre an image both horizontally and vertically. I hope you'll find these methods just as usefull as I do.

Written by: Ben Meyrick