標記の件で悩んでおりまして、CSSやHTMLの問題というよりは、モバイルの縦サイズがうまく取れていないのではないか、と考えています。
#wrapper {
display:table; /* 要素をテーブルのようにする */
width:100%;
max-width:600px;
height:300px;
margin:0 auto;
background:#fff;
}
#center-image {
display:table-cell; /* 要素をテーブルのようにする */
text-align:center; /* インライン要素の中央揃え */
vertical-align:middle; /* 天地中央に揃える */
}
CSSはウェブ上にあったものを利用してみたのですが、縦位置の中央表示については、明らかに対応できていない結果となりました。
なお、HTMLは以下のようになっています。
<body>
<div id="wrapper">
<img id="center-image" src="images/title.png"/>
</div>
モバイル独自の対応が必要なのでしょうか。