与内联元素对齐
这个问题在这里已经有了答案：
vertical-align将内联元素彼此对齐，但不会将它们放在其容器中。
因此，例如，如果在同一个div vertical-align: middle有更高的vertical-align: middle inline元素，则“Hello”将相对于它居中：
div {
height: 300px;
width: 300px;
background-color: aqua;
margin-bottom: 10px;
}
div > span {
vertical-align: middle;
background-color: orange;
font-size: 3em;
}
.big {
font-size:200px;
}<div>
<span>Hello!</span>
<span class="big">B</span>
</div>https://jsfiddle.net/x0gc91ch/1/
添加line-height: 300px
到div CSS，因为你正在尝试对齐到默认行高的中间，这不像你的父div那么高。
链接地址: http://www.djcxy.com/p/41661.html