Center image element in parent div

Question

How I can set center an image element inside a parent div? I would like to do this so that the middle of the image is always in the center of his parent. Also I want the ima

Answer 1

Try giving the image margin property as margin:0 auto, if your parent div has width so the image will be centered as per parent

Answer 2

I would add this to .box img.

.box img { margin-left: -25%; margin-top: -25%; }

You would probably need to ajust these per image, or maybe not due to the dimensions.

Answer 3

Add text-align: center; CSS declaration to the parent .box instead of the children .box img.

.box {
    height: 100%;
    width: 450px;
    border: 2px solid red;
    background: green;
    overflow: hidden;
    text-align: center;  /* align center all inline elements */
}

Here is the Fiddle.

Update

It seems there's also a 5px gap under the image, It belongs to the line height reserved characters. To remove that from inline elements like <img> you can use vertical-align: bottom:

.box img {
    height: 100%;
    width: auto;
    vertical-align: bottom; /* <-- fix the vertical gap */
}

JSFiddle Demo #2

Answer 4

You'll need to move the text-align: center; from the CSS for the image to the CSS for its parent div, so your CSS looks like this:

.box {
    height: 100%;
    width: 450px;
    border: 2px solid red;
    background: green;
    overflow: hidden; 
    text-align:center
}

.box img {
    height: 100%;
    width: auto;
}

And that's it!