CSSでテキストを縦方向中央にそろえる方法

ボックス内のテキストを縦方向中央にそろえる必要があり色々と調べてみたのですが…

テキストの内容の増減に対応するものはいくつかあったのですが、どうもうまくできません。

どうしたものかと悩んでいたらCSS3には

box-align　ボックス内の子要素の縦方向の揃え位置を指定する

という便利なプロパティがあるではないですか！

スマホのみ対応すればよい場合は、これを使わない手はないですよね。

ただ、ベンダープレフィックスをつけないとうまく適用されないようです。

[html]
div.sample {
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-align:center;
-webkit-box-align:center;
-o-box-align:center;
-ms-box-align:center;
}
[/html]