CODEWITHSUNDEEP
css
StackOverflowNewbie
StackOverflowNewbie

Reputation: 40643

CSS: how to vertically and horizontally align an image?

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!

Upvotes: 12

Views: 52685

Answers (8)

Vinnie Amir
Vinnie Amir

Reputation: 621

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.

Upvotes: -1

Jignesh Vaghela
Jignesh Vaghela

Reputation: 29

<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%;
}

Upvotes: 1

Elias
Elias

Reputation: 21

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>

Upvotes: 1

Renzo Calla
Renzo Calla

Reputation: 7696

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

Upvotes: 17

SmithMart
SmithMart

Reputation: 2801

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.

Upvotes: 1

Zoltan Toth
Zoltan Toth

Reputation: 47667

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;
}
​

Upvotes: 29

Jamie Bicknell
Jamie Bicknell

Reputation: 2326

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/

Upvotes: 1

YMMD
YMMD

Reputation: 3780

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;
}

Upvotes: 3

Related Questions