Why margin:0 auto can't center image in div levelly? - html

Question

The image element can be centered levelly with margin:0px 50px 0px 50px;.
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
img {
margin: 0px 50px 0px 50px;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
In the situation, margin:0 auto; == margin:0px 50px 0px 50px;.
So it is equal to write margin:0px 50px 0px 50px; as margin:0 auto;.
Why it can't be centered with margin:0 auto;?
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
img {
margin: 0 auto;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>

Answer 1

You miss display:block
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
.img1 {
margin: 0 auto;
display: block
}
<div class="wrapper">
<img class="img1" src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>

Answer 2

I'm sure there are better / more efficient ways of doing this. but...
This is what I use for centering images inside a div both vertically and horizontally while maintaining the div's fixed dimensions. The images are never cropped / stretched.
body {
text-align: center;
margin: 0 auto;
}
.my-image-parent {
margin:1em auto;
width: 350px;
max-width:100%;
height: 200px;
line-height: 200px; /* should match your div height */
text-align: center;
font-size: 0;
background: #131418;
}
/*fluff */
.bg1 {background: url(https://unsplash.it/799/799);}
.bg2 {background: url(https://unsplash.it/800/400);}
.bg3 {background: url(https://unsplash.it/400/800);}
/* end fluff */
.my-image {
width: auto;
height: 100%;
vertical-align: middle;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
<h4>Works for square, landsacape and portrait images.</h4>
<div class="my-image-parent">
<div class="my-image bg1"></div>
</div>
<br>
<div class="my-image-parent">
<div class="my-image bg2"></div>
</div>
<br>
<div class="my-image-parent">
<div class="my-image bg3"></div>
</div>

Answer 3

Since img tag is an inline-block element, margin: 0 auto; will not work. Its display property has to be set to display: block;.
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
img {
margin: 0 auto;
display: block;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
You can also add text-align: center; for the outer wrapper to center the image.
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
text-align: center;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
Edit:
Inline and inline-block elements do not have a width property, and so the "auto" cannot be calculated.
Reference : Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?