CSS: how to vertically and horizontally align an image?

Question

My page has space for an image that can be, say, a maximum 100x100 image. Users can upload any image dimension and the web application will resize it, maintaining aspect ration, to 100x100. So, it's possible for images to be resized to, say, 75x100 or 100x75, etc.

Regardless of the resized image's dimension, I want it to appear vertically and horizontally centered in its allocated space on the web page. How do I do this in CSS? Will I need a containing div, like this:

<div class="image_container">
     <image src="http://placehold.it/100x100/" height="100" width="100" alt=""/>
</div>

Anyway, sample CSS would be helpful. Thanks!

Does this answer your question? [Align image in center and middle within div](https://stackoverflow.com/questions/4888223/align-image-in-center-and-middle-within-div) — Felix, Mar 25 '20 at 03:23

score 28 · Accepted Answer · answered Apr 29 '12 at 10:28

28

Try this - http://jsfiddle.net/zYx4g/ This will work on image of any size and in all browsers.

.image_container {
    width: 300px;
    height: 300px;
    background: #eee;
    text-align: center;
    line-height: 300px;
}

.image_container img {
    vertical-align: middle;
}

answered Apr 29 '12 at 10:28

Zoltan Toth

46,981
12
120
134

2

this does not fit inside the div! – psiyumm Sep 08 '15 at 06:43

Renzo Calla · Answer 2 · 2016-03-17T14:35:22.403

16

I know this is and old question already answered but now you can use flex

<div class="container">
    <img  src="http://placehold.it/200x200" />
</div>

CSS

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    width: 50vw;
    height: 50vw;
}
.container img
{
    max-width:100%;
    max-height:100%;
}

Fiddle Demo

you can also customize the size of your container, some browser may not support flex you can check it here caniuse

edited Mar 17 '16 at 14:35

answered Mar 17 '16 at 14:24

Renzo Calla

7,486
2
22
37

1

Very nice! Works perfectly. – Jack Vial Aug 26 '16 at 20:02

score 3 · Answer 3 · edited Apr 29 '12 at 10:27

3

Move your left top corner of the image to the middle and reset it half the image's width and height:

.image_container img{
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

edited Apr 29 '12 at 10:27

Shikiryu

10,180
8
49
75

answered Apr 29 '12 at 10:21

YMMD

3,730
2
32
43

2

That would work for 100px by 100px images, but for other image sizes it won't work – Jamie Bicknell Apr 29 '12 at 10:22
If your image is 120x100px then it will slightly be right next to the middle. Try to imagine how the browser will apply the different CSS properties and you will understand why it won't work if the image size doesn't fit to the CSS properties. – YMMD Apr 29 '12 at 10:31
It will not exceed the maximum dimensions. – StackOverflowNewbie Apr 29 '12 at 10:35
OK, but if it for example is 80x100px, then it will be 10px left from the real middle. Again: Try to imagine how the browser applies the CSS properties and you will understand what my snipped does. – YMMD Apr 29 '12 at 10:47

score 1 · Answer 4 · answered Apr 29 '12 at 10:27

1

You could try this:

.image_container {
    display:table-cell;
    overflow:hidden;
    text-align:center;
    vertical-align:middle;
}
.image_container img {
    vertical-align:baseline;
}

Not 100% sure on browser compatibility, but should get you started in the right direction. Example: http://jsfiddle.net/fJtwX/1/

answered Apr 29 '12 at 10:27

Jamie Bicknell

2,306
17
35

Is the div wrapper necessary? – StackOverflowNewbie Apr 29 '12 at 10:28
You said you want the image to appear horizontally and vertically aligned in the allocated space (being the DIV), so if that's the case you would need the DIV otherwise you'd just display the image – Jamie Bicknell Apr 29 '12 at 10:31
I was just looking at this way and table-cell doesnt work in IE7 and lower. – SmithMart Apr 29 '12 at 10:32
@SmithMart Ah yeh, I thought as much – Jamie Bicknell Apr 29 '12 at 10:34
@JamieBicknell, yes I wanted it to appear centered in an "allocated space." Does that mean I must use a div? Could I somehow rely on just the img tag? Also, what to do about `table-cell`? – StackOverflowNewbie Apr 29 '12 at 10:37
As pointed out by @SmithMart it won't work in IE7 and lower. ZoltanToth's answer is pretty solid and more compatible. – Jamie Bicknell Apr 29 '12 at 10:39

SmithMart · Answer 5 · 2012-04-29T10:47:14.347

1

Edit: Zoltan Toth answered nicely.

Jamie's answer works, if you want older browserer compatibilty then use a table?

I know i'll probably get moaned at, but theres nothing wrong with tables when used where needed!

http://jsfiddle.net/Yhq5h/11/

set your container up what ever size is needed, I'd need to see the page, but this should work on all browsers.

edited Apr 29 '12 at 10:47

answered Apr 29 '12 at 10:39

SmithMart

2,731
18
35

Yup, fair enough. I tried it using line height and for some reason it never worked, must have been a typo :) – SmithMart Apr 29 '12 at 10:49

score 1 · Answer 6 · edited May 18 '17 at 12:12

1

In case someone still needs this here's a way to do it with display table;

.thumbnail { width:150px; height:150px; display: table; }

.thumbnail img { max-width:150px; max-height:150px; }

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

<article class="thumbnail">    
  <div class="thumbnailcontainer">
         <img id="Img1" src="http://img.youtube.com/vi/QAOMIH7cgh0/0.jpg" />   
   </div>
</article>

edited May 18 '17 at 12:12

goto

7,908
10
48
58

answered May 18 '17 at 11:50

Elias

21
4

Elias, for next times use the code format (the`{}` button) to format your code it's easier to read and you don't need to add the dots inside the tags :p – goto May 18 '17 at 12:14
@goto, i know sorry, i did use it but as i was typing the answer i saw that the html code wasn't showing up in the box below (i'm new here so i don't know if that's normal) – Elias May 19 '17 at 13:54
Don't worry Elias, I commented it for you to learn :) It usually needs a blank line before the codeblock it's maybe the source of your original formating problem. See you! – goto May 19 '17 at 13:59

score 1 · Answer 7 · answered May 03 '19 at 09:39

1

<div class="blog-thumbnail">                
    <img src="img.jpg" alt="img">
</div>

.blog-thumbnail {
    height: 200px;
    margin: 0 auto;
    position: relative;
}
.blog-thumbnail img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

answered May 03 '19 at 09:39

Jignesh Vaghela

29
3

1

Welcome to Stack Overflow. Could you please add a few words to help explain your answer? – Joey May 03 '19 at 09:57

score 0 · Answer 8 · answered Aug 24 '23 at 04:41

This is the cleanest and simplest solition:

.center {
     position: absolute;
     box-sizing: border-box;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
}

Just add "center" class to the image. If you dont get the desired outcome, it means your outer container may not be positioned. Just add "border: 1px dashed red" to your outer container to debug.

This 100% works.

CSS: how to vertically and horizontally align an image?

8 Answers8

Linked