CSS flexbox图像居中
我在flexbox中显示一组可变图像，并试图确保图像垂直和水平对齐其父div。 我尝试了通常的垂直对齐，文本对齐，最大宽度：100％;和边距：0自动;。 任何好的跨浏览器解决方案都不会导致扭曲/左对齐的图像？
这里是CSS（它是当前的borky形式，我也尝试了其他上述居中CSS）：
.collage{
max-width: 100%;
max-height: 100%;
height: inherit;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: inline-flex;
flex-direction: column;
}
.collage div{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: inline-flex;
overflow: hidden;
width: 100%;
}
.collage img{
max-height: 100%;
}
jsfiddle：http://jsfiddle.net/hSb93/3/
如果你添加margin: auto; 以.collage img它解决它。
但所有浏览器都不支持flexbox。
如果您希望它完全跨浏览器，则可以在图像前放置一个跨度，并将该CSS放入其中：
CSS
.collage div{
text-align: center;
}
span{
display: inline-block;
height: 100%;
vertical-align: middle;
}
HTML
<div>
<span></span>
<img>
</div>