Center image in div horizontally

Question

I have an img in a div (class="top_image") and I want this image to be exactly in the middle of the div but nothing I try works...

Thanks for any help!

Will the div and image dimensions always be known? Will the image be changing? — j08691, Apr 02 '12 at 17:03

score 605 · Accepted Answer · edited Jul 01 '18 at 12:52

605

Every solution posted here assumes that you know the dimensions of your img, which is not a common scenario. Also, planting the dimensions into the solution is painful.

Simply set:

/* for the img inside your div */
display: block;
margin-left: auto;
margin-right: auto;

or

/* for the img inside your div */
display: block;
margin: 0 auto;

That's all.

Note, that you'll also have to set an initial min-width for your outer div.

edited Jul 01 '18 at 12:52

Clemens Tolboom

1,664
17
28

answered Apr 16 '13 at 10:38

Dyin

6,494
6
42
65

6

Perfect answer: This solution is also used in [Bootstrap](https://github.com/twbs/bootstrap/blob/master/less/mixins/image.less). – nietonfir Mar 20 '14 at 15:19
26

Note: This only works if the image's width is smaller than the parent div. – devius Jan 13 '15 at 16:20
2

Is there a solution for an absolutely positioned image inside of of relatively positioned `
`?
– DGibbs Feb 12 '15 at 16:15
I was looking for that for ages !!! – sam Nov 25 '15 at 15:26
3

does not work if image is larger than div – BbIKTOP Dec 01 '16 at 20:13
Oh my god! You solve me a problem. Thanks a lot!! – Daniel Jose Padilla Peña Nov 02 '17 at 16:31
@BbIKTOP If your image is larger than its parent div, you can make the image smaller by applying width less than 100% to the image. – Lim Dec 30 '19 at 15:25

Maxime Fabre · Answer 2 · 2012-04-02T17:08:51.223

29

text-align: center will only work for horizontal centering. For it to be in the complete center, vertical and horizontal you can do the following :

div
{
    position: relative;
}
div img
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: [-50% of your image's width];
    margin-top: [-50% of your image's height];
}

edited Apr 02 '12 at 17:08

answered Apr 02 '12 at 17:02

Maxime Fabre

2,242
3
20
24

I think you mean `[-50% of your image's width/height]` :) – rgthree Apr 02 '12 at 17:07
Yup, sorry, my bad. Typed a little fast. Thanks. – Maxime Fabre Apr 02 '12 at 17:09
1

Any ideas if you don't know the size of the image beforehand.. I have to resize an image to be displayed in a container of fixed size, but the image could be wide or tall... – Ads Feb 08 '13 at 05:34
Sorry... figured it out... see solution in my answer.. – Ads Feb 08 '13 at 05:51

score 11 · Answer 3 · edited Apr 09 '13 at 10:13

11

A very simple and elegant solution to this is provided by W3C. Simply use the margin:0 auto declaration as follows:

.top_image img { margin:0 auto; }

More information and examples from W3C.

edited Apr 09 '13 at 10:13

Baby Groot

4,617
39
52
69

answered Apr 09 '13 at 09:55

Phil Thomas

119
1
3

Saved a bunch of pain! – JGCW Dec 17 '21 at 00:06

score 9 · Answer 4 · edited Nov 13 '13 at 18:15

<div class="outer">
    <div class="inner">
        <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s320/tall+copy.jpg" alt="tall image" />
    </div>
</div>
<hr />
<div class="outer">
    <div class="inner">
        <img src="http://www.5150studios.com.au/wp-content/uploads/2012/04/wide.jpg" alt="wide image" />
    </div>
</div>

CSS

img
{
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto auto;
}

.outer
{
    border: 1px solid #888;
    width: 100px;
    height: 100px;
}

.inner
{
    display:table-cell;
    height: 100px;
    width: 100px;
    vertical-align: middle;
}

score 7 · Answer 5 · answered Apr 02 '12 at 17:26

7

I think its better to to do text-align center for div and let image take care of the height. Just specify a top and bottom padding for div to have space between image and div. Look at this example: http://jsfiddle.net/Tv9mG/

answered Apr 02 '12 at 17:26

Jay

1,365
1
17
29

Image is broken but works great – App Dev Guy Mar 22 '16 at 04:07

score 5 · Answer 6 · answered Jul 23 '14 at 08:28

5

I hope this would be helpful:

.top_image img{
display: block;
margin: 0 auto;
}

answered Jul 23 '14 at 08:28

Arasu Pandiyan

92
1
9

3

please tell what did u do here . explain. – Pratik Jul 23 '14 at 08:45

score -5 · Answer 7 · answered Dec 01 '15 at 23:18

-5

This took me way too long to figure out. I can't believe nobody has mentioned center tags.

Ex:

<center><img src = "yourimage.png"/></center>

and if you want to resize the image to a percentage:

<center><img src = "yourimage.png" width = "75%"/></center>

GG America

answered Dec 01 '15 at 23:18

DisgruntledHuman

3

2

Center tags are now deprecated and are very frowned apon and is in the process of being dropped although it works in most browsers at the moment. – Peter Warrington Apr 16 '16 at 10:41
2

"GG America". Beautiful. – carefulnow1 Apr 08 '17 at 20:47
Not supported in HTML5. Use CSS instead. Defines centered text – Tahir Mar 12 '21 at 12:18

Center image in div horizontally

7 Answers7

Linked

Related