我不明白什么时候vertical-align会起作用，什么时候不会起作用。
每次我遇到一个用例时，vertical-align它是否真正有效似乎都是一个抛硬币的问题。我知道它必须应用于内联元素。我读到我必须line-height为通常没有的元素指定一个。我读到该height属性必须具有静态（非自动/非％）值。我读到，vertical-align如果某些（现代）浏览器所使用的元素不是自然的内联元素，则它们无法正确处理。我不清楚是否vertical-align应该位于包含元素（例如text-align）或我想要垂直对齐的元素上。
我创建了这个 jsfiddle来尝试解决问题，但仍然感到困惑。
#outer {
box-sizing: border-box;
border: red 1px solid;
height: 200px;
width: 400px;
text-align: center;
}
#inner {
border: blue 1px solid;
display: inline-block;
height: 200px;
vertical-align: middle;
}
#header {
border: green 1px solid;
display: inline-block;
line-height: 1em;
margin: 0;
}<div id="outer">
<div id="inner">
<h1 id="header">
Some Text
</h1>
</div>
</div>在上面的 jsfiddle 中，我希望#header位于 和 顶部和底部之间的中间#outer …