Not able to center the image inside a div - html

Question

I have an image inside a div, I want to center the image vertically and horizontally, tried different approaches like making container display as table and image as table-row etc.
Here it's not aligning vertically.
Here is my code:
<div class="container">
<img src='images/img1.jpg' class="imgclass">
</div>
CSS:
.container {
width: 70%;
min-height:400px;
overflow: hidden;
position: relative;
text-align: center;
}
.container img {
max-height: 100%;
}

Answer 1

You can use this absolute method:
JSFiddle
.container {
width: 70%;
min-height:400px;
overflow: hidden;
position: relative;
}
.container img {
max-height: 100%;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
This way, you don't need to change the structure of your HTML and it will always be in the center, no matter what height or width you give the element, or even if you re-size the page.
You also don't have to know the size of the image.
Browser Compatibility:
Chrome, Firefox, Safari, Mobile Safari, IE8-10.

Answer 2

An easier solution would be to place the image as a background image inside the div
.container
{
background:url('images/img1.jpg') no-repeat center center;
width: 70%;
min-height:400px;
}
You can also use the table inside the div and vertical and horizontal align the content of the table to center
<div class="container">
<table>
<tr>
<td style="vertical-align:center; text-align:center;">
<img src='images/img1.jpg' class="imgclass">
</td>
</div>

Answer 3

You can try absolute centering. Using this method, you don't have to alter your html or know the size of the image.
.container {
position:relative;
width: 70%;
min-height:400px;
overflow: hidden;
text-align: center;
}
.container img {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
max-height: 100%;
}
JSFiddle

Answer 4

If you know the dimension of the image, then following css will work for you:
img {
width:250px;
height:250px;
margin:0 auto;
display:block;
margin-top:calc(50% - 125px);
margin-top:-moz-calc(50% - 125px); /*for mozilla
margin-top: -webkit-calc(50% - 125px); /*for webkit browsers.
}
You don't need any special style for container. This is the list of compatible browsers: http://caniuse.com/calc
Demo:http://jsfiddle.net/lotusgodkk/GCu2D/143/

Answer 5

If you only need ie9+ you can use transforms:
.container {
width: 70%;
min-height:400px;
overflow: hidden;
position: relative;
text-align: center;
}
.container img {
max-height: 100%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
If you know the exact size of the image you can use negative margins instead of translate. The margins will be half the size of the image.

Answer 6

Take another div inside of .container and place image inside of it. Then making .container div's css rule to display:table and display:table-cell; vertical-align:middle for inner div will do the trick.
HTML
<div class="container">
<div class="img-cont">
<img src='http://fc08.deviantart.net/images3/i/2004/09/1/0/flower_eyes.jpg' class="imgclass">
</div>
</div>
CSS
.container {
width: 70%;
min-height:400px;
overflow: hidden;
position: relative;
text-align: center;
display:table;
background:#ccc;
}
.img-cont{
display:table-cell;
vertical-align:middle;
}
.container img {
max-height: 100%;
}
Here is a fiddle http://jsfiddle.net/v22rG/