コーディングで文字を上下中央に配置したい場面て結構あるんですが、
vertical-alignはインライン要素とテーブルセルにしか適用されないのでliine-heigtで高さ指定をして対応してました。
css3でdisplayにflexboxという値が新たに追加されたので、flexboxを使って縦横中央に文字を配置できるみたいです。

display:flexbox;
flex-align:center;
flex-pack:center;

iPhone、Androidの標準ブラウザではサポートされているようですが
まだまだ実装が遅れているブラウザも多いようです。

下記コードを合わせて記述しておけば問題なさそうです。

display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack:center;
display:-moz-box;
-moz-box-align:center;
-moz-box-pack:cetner;