Andy Andy - 11 months ago 70
CSS Question

Centre image in a DIV

There are numerous discussionsn on SO but I've tried suggestions without success. I have a DIV within which I need an image, whose height and width are unknown, to be centered horizontally and vertically.

I also need this multiple times so I don't want to have to add more CSS code each time.

Here's what I have in terms of CSS and HTML for the DIV.

.gallery_image_container {
position: relative;
width: 830px;
height: 500px;
z-index: 7;
border: solid 4px #EAEAEA;


<div class="gallery_image_container">
<img src="image.png" />

Answer Source

To give credit, I reviewed this very helpful article:

You need to add 3 more CSS rules to .gallery_image_container:

text-align: center;
display: table-cell;
vertical-align: middle;

The first line is pretty obvious; it gets you centered horizontally. The second line gets your div to behave in a table cell-like manner, and the third makes the vertical alignment happen. I'd post a jsfiddle to demonstrate but they are doing some maintenance stuff today. I did test it and it worked in current Chrome and FF and IE 8.