colorbox　スマホやタブレットで中央に表示されない

今回初めて、colorboxを使うことになったのですが、うまく表示されずに困っています。
PCだと中央に表示されるのですが、
iphoneやipadで見ると上下は真ん中ですが、左右がズレて左端に小さく表示されてしまいます。

現在のコードは以下です。

<script>
$(function() {
    $(".photo").colorbox({
        rel:'slideshow1',
        slideshow:true,
        slideshowSpeed:3000,
        maxWidth:"90%",
        maxHeight:"90%",
        opacity: 0.7
  });
});
</script>

<div class="gallery">
<ul>
        <li><a href="images/001/img_02.jpg" class="photo"><img src="images/001/img_02.jpg"></a></li>
        </li>
        <li><a href="images/001/img_03.jpg" class="photo"><img src="images/001/img_03.jpg"></a></li>
        </li>
        <li><a href="images/001/img_04.jpg" class="photo"><img src="images/001/img_04.jpg"></a></li>
        </li>
        <li><a href="images/001/img_05.jpg" class="photo"><img src="images/001/img_05.jpg"></a></li>
        </li>
        <li><a href="images/001/img_06.jpg" class="photo"><img src="images/001/img_06.jpg"></a></li>
        </li>
</ul>
</div>

自分で調べてみて2通り試してみましたが、
おそらく自分の記述方法に間違いがあるようで、改善されませんでした。

（1）変わらず左に寄ってしまいます。

<script>
$(document).ready(function() {
    $('.photo1').colorbox({
        onComplete: function() {
            window.resizeTo(640, 480);
            $.colorbox.position(0);
        }
    });
});
</script>

（2）height:"90%"は効いていてcolorboxの高さは90%になりましたが、
width:"99%"は効いていないようで、幅30%ぐらいのサイズで変わらず左端に表示されます。
そして、ボックスの上部に画像が表示されています。

<script>
 $(window).on("resize load" , function(){

        if( parseInt( $(window).width() ) < 740  ){
        //スマホ
          $(".photo1").colorbox({
                iframe:true,
                width:"99%",
                height:"90%",
                onComplete: function() {
                    setTimeout(function(){
                        $.colorbox.position(0);
                    },1000);
                }
           });
        } else {
          $(".photo1").colorbox({
        rel:'slideshow1',
        slideshow:true,
        slideshowSpeed:3000,
        maxWidth:"90%",
        maxHeight:"90%",
        opacity: 0.7
           });
        }
    });
</script>

自分の記述が間違っているのだと思うのですが、どう直したらいいのか解らず困っています。
他の方法などでも中央に表示させる方法はあるでしょうか？

どなたかご教授ください。
よろしくお願いします。