すみません。質問させてください。

MonacaでjQueryを利用してページを作成しているのですが、1点詰まったことがあります。

画面の縦横の真ん中に文字を表示させように、

htmlで

<div id="startFl" data-role="page" height="100%">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
    <tr height="100%"> 
        <td class="mainscreen"><p id="call_text_Fl"></p></td> 
    </tr> 
</table> 

CSSで

html {
    height: 100%;
}
body {
  height: 100%;
}
td.mainscreen{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
}

として、見たのですが、横では中央に表示されたのですが、縦では真ん中になっていませんでした。
これは何が良くないのでしょうか。

お知恵をお貸しください。