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

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!