How to center an image inside a div in the exact middle

Question

I am trying to center an image inside a div in the exact middle - horizontally and vertically, but this is not working for me:

#col_as_table
{
    float:left;
    position:relative;
    width:14%;
    min-height:100px;
    height:auto;
    display: table;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

HTML

<div id="col_as_table"><img src="test.png"></div>

And the rest of the code? could be helpfull to find the problem.. a jsfiddle example maybe — gmo, Jul 10 '14 at 20:53
Remove `float:left;` Why would you have float: left if you want to center the image ? — Ani, Jul 10 '14 at 20:56
The div go to the left i have 2 cols and this it´s the col of left , only want show the image in the center and in the middle , i put the code i have — user3765800, Jul 10 '14 at 20:57
This is a possible duplicate of: http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div — disinfor, Jul 10 '14 at 21:03
You likely will not get any suitable answer untill someone makes the good guess. Just bring a fiddle or a codepen, witj 2 cols and some fake image and fake content with , eventually, a sketch of what you try to do. As said , there many ways to center content — G-Cyrillus, Jul 10 '14 at 21:03
possible duplicate of [How to vertically center image inside div](http://stackoverflow.com/questions/2237636/how-to-vertically-center-image-inside-div) — Paulie_D, Jul 11 '14 at 12:49

score 3 · Accepted Answer · answered Jul 10 '14 at 21:13

Give this a shot. You'll need an extra div.

Fiddle!

HTML:

<div class="divTable">
    <div class="innerDivTable">
        <img src="test.png"/>
    </div>
</div>

CSS:

.divTable {
    width: 200px; /* purely for demonstration */
    height: 200px; /* purely for demonstration */
    display: table;
    border: 1px solid black;
}

.innerDivTable {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Ani · Answer 2 · 2014-07-10T21:13:06.313

0

Fiddle: http://jsfiddle.net/4mYj3/1/

CSS:

#col_as_table
{
   position:relative;
   margin: auto;
   text-align: center;
   vertical-align: middle;
   display: table;
   height:500px;
}
img{
  position: absolute;
  top: 50%; 
  left: 0; 
  bottom: 0; 
  right: 0;
}

edited Jul 10 '14 at 21:13

answered Jul 10 '14 at 21:00

Ani

4,473
4
26
31

Again, this doesn't solve the OPs question. If you add a `height` property to the `div`, the image doesn't align vertically. – disinfor Jul 10 '14 at 21:03
He doesn't have a height. He should clarify that in the question. – Ani Jul 10 '14 at 21:04
That's the problem. Before someone edited his question, he asked for vertical AND horizontal centering - even if the `height` of the `div` changes. – disinfor Jul 10 '14 at 21:05
Ahh...Got it...My Bad!! I had no idea that was the case – Ani Jul 10 '14 at 21:10
No worries! I saw that part of the question was removed in an edit :) – disinfor Jul 10 '14 at 21:10
Updated link and answer – Ani Jul 10 '14 at 21:13

score 0 · Answer 3 · answered Jul 11 '14 at 10:28

I wrote a Pen some time ago for the same purpose. It shows 3 methods on how you can center an image vertically as well as horizontally.

I'd personally use absolute positioning or table cell depending upon the situation.

#div3{
    display:table-cell;
    vertical-align:middle;
}

#div1 img{
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translateY(-50%) translateX(-50%);
}

score -1 · Answer 4 · answered Jul 10 '14 at 20:57

-1

Here's a fiddle:

http://jsfiddle.net/C4DC7/

There are many ways to accomplish this. My example expands on the idea that you can afford your images to expand the parent div element.

answered Jul 10 '14 at 20:57

Onion

1,714
1
23
42

This answer isn't correct. It fails in that the image is never in the exact center as the OP requested. – disinfor Jul 10 '14 at 20:59
Yes also i can do that with padding but i want get the same as when i use for example in tables valign , i read time ago one way for do this in css with table but i can find – user3765800 Jul 10 '14 at 21:00
The question actually doesn't really deserve an answer. @disinfor I would not downvote answer but the question, maybe this is the right size of the picture of the op :) – G-Cyrillus Jul 10 '14 at 21:07
@GCyrillus Fair enough! I think I can remove my down vote on the answer in a few minutes. – disinfor Jul 10 '14 at 21:09

How to center an image inside a div in the exact middle

4 Answers4