居中对齐div内的图像水平
这可能是一个愚蠢的问题，但由于中心对齐图像通常的方式不工作，我想id问。 我如何居中对齐（水平）的图像在其容器div内？
下面是HTML：
<!--link here-->
<a href="NotByDesign">
<div id="thumbnailwrapper">
<a href="NotByDesign">
<!--name here-->
<b>Not By Design</b>
<br>
<div id="artiststhumbnail">
<a href="NotByDesign">
<!--image here-->
<img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
</a>
</div>
<div id="genre">Punk</div>
</div>
继承人的CSS，我也包括缩略图的其他元素的CSS。 它按降序运行，所以最高的元素是一切的容器，最低的是一切。
#thumbnailwrapper {
color: #2A2A2A;
margin-right: 5px;
border-radius: 0.2em;
margin-bottom: 5px;
background-color: #E9F7FE;
padding: 5px;
border-color: #DADADA;
border-style: solid;
border-width: thin;
font-size: 15px
}
#thumbnailwrapper:hover {
box-shadow: 0 0 5px 5px #DDDDDD
}
#artiststhumbnail {
width: 120px;
height: 108px;
overflow: hidden;
border-color: #DADADA;
border-style: solid;
border-width: thin;
background-color: white;
}
#artiststhumbnail:hover {
left: 50px
}
#genre {
font-size: 12px;
font-weight: bold;
color: #2A2A2A
}
好的，我已经添加了没有PHP的标记，所以应该更容易看到。 这两种解决方案似乎都不适用于实践。 顶部和底部的文本不能居中，并且图像应该位于其容器格中。 该容器已隐藏溢出，所以我想看到图像的中心，因为这通常是焦点所在。
CSS Guy建议如下：
所以，翻译，也许：
#artiststhumbnail a img {
display:block;
margin:auto;
}
以下是我的解决方案：http://jsfiddle.net/marvo/3k3CC/2/
我刚刚在W3 CSS页面上找到了这个解决方案，它解答了我的问题。
img {
display: block;
margin-left: auto;
margin-right: auto;
}
来源：http://www.w3.org/Style/Examples/007/center.en.html
CSS flexbox可以通过justify-content: center以图像父元素为justify-content: center来实现。
HTML
<div class="image-container">
<img src="http://placehold.it/100x100" />
</div>
CSS
.image-container {
display: flex;
justify-content: center;
}
输出：
body {
background: lightgray;
}
.image-container {
width: 200px;
display: flex;
justify-content: center;
margin: 10px;
padding: 10px;
/* Material design properties */
background: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
width: 500px;
}
.image-3 {
width: 300px;
}<div class="image-container">
<img src="http://placehold.it/100x100" />
</div>
<div class="image-container image-2">
<img src="http://placehold.it/100x100/333" />
</div>
<div class="image-container image-3">
<img src="http://placehold.it/100x100/666" />
</div>