なぜマージン：0のautoはdivのレベルを中心にすることができませんか？

Question

イメージ要素は、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>

、margin:0 auto; == margin:0px 50px 0px 50px;。
margin:0px 50px 0px 50px;はmargin:0 auto;と書かれています。
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

あなたは、私がこれを行うためのより良い/より効率的な方法があると確信している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

を欠場。しかし...

これははのdivの固定寸法を維持しながら、私は垂直方向と水平方向の両方div内の画像をセンタリングするために使用するものです。イメージは決してクロップド/に決してならない。

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

imgタグはinline-block要素、margin: 0 auto;が動作しませんであるため。その表示プロパティは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>

また、画像を中央に外側のラッパーにtext-align: center;を追加することができます。

.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>

編集：

インラインとインラインブロック要素はwidthプロパティを持っていない、ので、 "自動" を計算することができません。

参考：Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?