How to center an image both vertically and horizontally in a div

Question

How do I set the position of an image to be in the center of a div (both vertically and horizontally). I can make it horizontally center, but how to center it vertically?

N.B: height and width of the images may change.

html:

{% for photo in photos %}
<div class="thumbnail_container">
    <a class='gallery' href='{{MEDIA_URL}}{{photo.image}}'><img src="{{MEDIA_URL}}{{photo.image}}" class="thumbnail"></a>
</div>
{% endfor %}
<span class="clear_left"></span>

css:

.thumbnail_container {
    background-color: white;
    border: 1px solid red;
    width: 250px;
    height: 200px;
    float: left;
    margin: 5px;
}

.thumbnail {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid red;
    max-width: 240px;
    max-height: 190px;
}

Any help will be much appreciated! Thanks.

http://stackoverflow.com/questions/11359942/center-an-image-in-div-vertically-and-horizontally?rq=1 — FazoM, Oct 26 '13 at 10:14
M sorry, but didn't helped. All the images got jumbled up in one single div. — Robin, Oct 26 '13 at 10:21

score 3 · Answer 1 · answered Oct 26 '13 at 10:42

3

Try to make parent container CSS like this:

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

Try this class:

.thumbnail_container{
    width: 250px;
    height: 200px;
    border:1px solid; 
    padding: 0px;   
    margin-bottom: 0px;
    display: table-cell; 
    text-align: center;
    vertical-align: middle;
}

Try jsfiddle

answered Oct 26 '13 at 10:42

Ishan Jain

8,063
9
48
75

But, I don't want that much of space between the image and the div. So, I changed the height/width to max-height/max-width, and I increased the dimensions of the img. After the preferred spacing between the image and the div, the vertical alignment again looses it center position. Please check it - http://jsfiddle.net/Robinlery/njbdS/ – Robin Oct 26 '13 at 11:05
1

@Robin this is the perfect way to center - [Check this out](http://stackoverflow.com/a/19108967/1542290) – Mr. Alien Oct 26 '13 at 11:10

score 0 · Answer 2 · answered Oct 26 '13 at 10:21

0

.thumbnail_container
{
    border:2px solid red;
    height:400px;
    width:500px;
    text-align:center;
}
a img
{
    margin-top:15%;
}

Live Demo

answered Oct 26 '13 at 10:21

Vinay Pratap Singh Bhadauria

9,829
3
28
49

Your demo does seems great. But my images are all coming out of the div downside! – Robin Oct 26 '13 at 10:25
@Robin why don't you make a fiddle. – Vinay Pratap Singh Bhadauria Oct 26 '13 at 10:26
Some of it are displaying well, but some are coming down of the div. Please check on it - http://jsfiddle.net/Robinlery/F6CsN/. – Robin Oct 26 '13 at 10:37
But they are loosing its aspect ratio. Do i specify the max-height and width for that? – Robin Oct 26 '13 at 10:45
@Robin check out http://jsfiddle.net/F6CsN/1/, they are now keeping aspect ratio – Vinay Pratap Singh Bhadauria Oct 26 '13 at 10:59
@Mr.Alien The problem is that the image size may vary. – Robin Oct 26 '13 at 11:14

Ahmad Ajmi · Answer 3 · 2013-10-27T08:16:20.857

Use can use transform to do this trick, it will be always in the center

.thumbnail_container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #444;
}

.thumbnail {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

Demo

EDIT:

Add this as a fallback in a separate css file to target IE want to support it

.thumbnail {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-left: -40px; /* 80px/2 */
  margin-top: -40px;

}

You can target IE in this way in your html file and add your css in ie.css

<!--[if lt IE 9]>
    <link rel="stylesheet" href="ie.css">
<![endif]-->

So ie.css will be run on any browser less than ie9, so we can use 'translate' for modern browsers in our main style and still support old ones.

Thanks! But how do I target IE? I tried, but all the images got shrinked... Will you please elaborate. And I am using max-height and max-width, will it still be valid? — Robin, Oct 26 '13 at 19:18

How to center an image both vertically and horizontally in a div

3 Answers3