monacaによる画面レイアウトでの画像の中央配置について


標記の件で悩んでおりまして、CSSやHTMLの問題というよりは、モバイルの縦サイズがうまく取れていないのではないか、と考えています。

[code]

        #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; /* 天地中央に揃える */
    }
    
[/code]

CSSはウェブ上にあったものを利用してみたのですが、縦位置の中央表示については、明らかに対応できていない結果となりました。

なお、HTMLは以下のようになっています。

[code]

    <body>
    <div id="wrapper">
    <img id="center-image" src="images/title.png"/>
    </div>
    
[/code]

モバイル独自の対応が必要なのでしょうか。




どういう風にセンタリングしたいのか？HTMLのソースが無いので推測ですが、  
`margin`をつける要素が違うのではないでしょうか？  
サンプル作成してみましたが、こういうことでしょうか？

[code]

    #wrapper {
        display:table; /* 要素をテーブルのようにする */
        width:100%;
        max-width:600px;
        height:300px;
        background:#00f;
    }
    
    #center-image {
        display:table-cell; /* 要素をテーブルのようにする */
        text-align:center; /* インライン要素の中央揃え */
        vertical-align:middle; /* 天地中央に揃える */
        margin:0 auto; /* wrapperから移動 */
    }
[/code]

[code]

    <div id="wrapper">
      <img id="center-image" src="https://dummyimage.com/200x100/000/fff" width="200px">
    </div>
[/code]

* * *

**追記**  
なるほど、縦にもセンタリングしたいのですね？  
では、質問文のコード基準で変更するとimgに直接ではなく  
テーブルセル用の`wrapper`をもう1つ作ってはどうでしょうか？

[code]

    #wrapper {
        display:table; /* 要素をテーブルのようにする */
        width:100%;
        max-width:600px;
        height:300px;
        background:#00f;
    }
    
    #inner_wrap{
        display:table-cell; /* 要素をテーブルのようにする */
        text-align:center; /* インライン要素の中央揃え */
        vertical-align:middle; /* 天地中央に揃える（セル内の位置をmiddleに） */
        margin:0 auto; /* wrapperから移動 */
    }
[/code]

[code]

    <div id="wrapper">
      <div id="inner_wrap">
        <img id="center-image" src="https://dummyimage.com/200x100/000/fff" width="200px">
      </div>
    </div>
[/code]




どういう風にセンタリングしたいのか？HTMLのソースが無いので推測ですが、  
`margin`をつける要素が違うのではないでしょうか？  
サンプル作成してみましたが、こういうことでしょうか？

[code]

    #wrapper {
        display:table; /* 要素をテーブルのようにする */
        width:100%;
        max-width:600px;
        height:300px;
        background:#00f;
    }
    
    #center-image {
        display:table-cell; /* 要素をテーブルのようにする */
        text-align:center; /* インライン要素の中央揃え */
        vertical-align:middle; /* 天地中央に揃える */
        margin:0 auto; /* wrapperから移動 */
    }
[/code]

[code]

    <div id="wrapper">
      <img id="center-image" src="https://dummyimage.com/200x100/000/fff" width="200px">
    </div>
[/code]

* * *

**追記**  
なるほど、縦にもセンタリングしたいのですね？  
では、質問文のコード基準で変更するとimgに直接ではなく  
テーブルセル用の`wrapper`をもう1つ作ってはどうでしょうか？

[code]

    #wrapper {
        display:table; /* 要素をテーブルのようにする */
        width:100%;
        max-width:600px;
        height:300px;
        background:#00f;
    }
    
    #inner_wrap{
        display:table-cell; /* 要素をテーブルのようにする */
        text-align:center; /* インライン要素の中央揃え */
        vertical-align:middle; /* 天地中央に揃える（セル内の位置をmiddleに） */
        margin:0 auto; /* wrapperから移動 */
    }
[/code]

[code]

    <div id="wrapper">
      <div id="inner_wrap">
        <img id="center-image" src="https://dummyimage.com/200x100/000/fff" width="200px">
      </div>
    </div>
[/code]

