How to center img inside position absolute

Question

I try to center image inside this absolute position div I try margin: 0 auto but it can't work. what I am doing wrong?

<div class="support"> <img src="../image/contact.jpg" /></div>


.support {
position:absolute;
left:30px;
top:50px;
  width:300px;
  height:450px;
}
.support img {
width:243px;
height:350px;
margin:0 auto;
}

Answer 1

add display:block to image:

.support img {
width:243px;
height:350px;
margin:0 auto;
display: block; /* add this */
}

Answer 2

Hey try this text-align center in image parent div

.support {
position:absolute;
left:30px;
top:50px;
  width:300px;
  height:450px;
  text-align: center;
}
.support img {
width:243px;
height:350px;
margin:0 auto;
}

<div class="support"> <img src="../image/contact.jpg" /></div>

Answer 3

You can also use display: block; like this:

.support {
    left:30px;
    top:50px;
      width:300px;
      height:450px;
    }
    .support img {
    width:100px;
    height:100px;
    margin:0 auto;
    display: block;
    }

<div class="support"> <img src="data:image/jpeg;base64,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" /></div>

Answer 4

<style>
.support {
left:30px;
top:50px;
  width:300px;
  height:450px;
  margin:0 auto;
}
.support img {
width:243px;
height:350px;
margin:0 auto;
}

</style>
<div class="support"> <img src="../image/contact.jpg" /></div>

try this.