画像を真ん中にする -> CSS or JavaScript

　以前発覚した一つの問題ですが、タブレットで Ads の画像をスクリーンの真ん中にできるだけ大きく表示するには、CSS でやるか、JavaScript で動的に設定するか。。。
　CSS の場合、下記のように HTML を書いて
  <div id="container">
    <div id="wrapper">
        <div>何かのコンテンツ or img タグ</div>
　</div>
  </div>
  #container には {display: table; height:100%; margin: 0 auto;} を設定して、#wrapper に {display: table-cell; vertical-align: middle; } スタイルを設定すれば、真ん中に表示されるはずです。-> Body の height も 100% に設定する必要がある。
    サンプル
　画像の場合、さらに width と height を設定する必要があるが、基本的に width を 100% にして、height を auto に設定すれば、同じ ratio で表示される。
　
　ただ、タブレットだから、orientation を変更する場合、height に合わせる場合があるので、考えた結果、JavaScript で画像の naturalWidth と naturalHeight を取得して、スクリーンサイズを比較すれば、naturalWidth / width, naturalHeight /  height の大きい方に合わせて、さらに position を relative に設定して、top と left を (width - img.offsetWidth) / 2 , (height - img.offsetHeight) / 2 に設定する必要がある。もちろん body の width と height は 100% を設定する必要がある。

　実際比べてみれば、多分 JavaScript のほうがやりやすいと思う。処理は簡単だから、jQuery を使う必要もないし、全部 native の JS で実現できる。
　注意すべきところは Android は resize で、iOS は orientationchange イベントをそれぞれハンドラーをアタッチする。
　var eventStr = navigator.userAgent.match(/iPhone|iPad|iPod/i) ? 'orientationchange' : 'resize';

　それでは。