vertical-alignの役割

ブロック要素を縦方向中央に配置させるために、vertical-alignを用いたが失敗した。どうやらvertical-alignはブロック要素に適用できないとのこと。そこでvertical-alignの役割について疑問に思い調べたのでメモとして残しておく。
こちらのサイトを参考にした。

html

<div class="outer">
    <div class="inner">center</div>
</div>

CSS

.outer {
    width: 100px;
    height: 100px;
}

.inner {
    vertical-align: middle;
}

div.innerにvertical-alignを適用しても中央に配置されない。では、以下のようにインライン要素にしたら、、、

.inner {
    display: inline;
    vertical-align: middle;
}

これも配置されない。インライン要素になら適用できるんじゃないの？？？と疑問に思い、さらに調べたところ解決した。
vertical-alignはボックス内の位置を決めるプロパティではなく、同じブロック内のインライン要素どうしの位置関係を決めるものらしい。