如何使用CSS在div中居中放置图像？
这个问题在这里已经有了答案：
parent（ #loading ）height是子元素（ img ）的高度。 因为垂直对齐没有意义。 设置较大高度的父元素，然后通过任何可用方法将内元素垂直居中。
* {
padding: 0;
margin: 0;
}
.overlay {
background: #e9e9e9;
opacity: 0.5;
}
#loading {
display: flex;
height: 100vh;
}
#loading img {
margin: auto;
}<div class="overlay">
<div id="loading">
<img src="http://placehold.it/160x120">
</div>
</div>有几种方法可以实现垂直对齐，其中许多方法会变得复杂。
最简单的修复方法之一是将元素设置为绝对定位和边距为自动，同时将顶部和底部定义为0。
#loading {
position: relative;
}
#loading img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
链接到jsfiddle。
链接地址: http://www.djcxy.com/p/75753.html