jQueryを使って要素を常に画面中央に置きたい

前提・実現したいこと

現在HTML,CSS、jQuery を使ってウェブサイト制作の練習をしています。

そこで、背景は１００ｖhに指定し、
その上にボックスを縮小拡大、レスポンシブに対応するように
常に真ん中に置きたいと考えています。

調べてみて、画面の大きさを変えるたびに
jQueryでボックスのmargin-topを計算して出力すればよいというところまでは、
分かりました。

発生している問題・エラーメッセージ

HTML
1  <section class="main">      
2    <div class="boxWrapper">
3      <img class="box">
4    </div><!-- /.boxWrapper -->
5  </section><!-- /.main -->
6

jQuery
1  $('.main').resize(modalResize);
2  function modalResize(){
3
4    var mainW = $('.main').width();
5    var mainH = $('.main').height();
6
7    var boxW = $(".box").Width();
8    var boxH = $(".box").Height();
9
10  //取得した値をcssに追加する
11    $(".box").css({
12      //margin-topの計算式
13          });
14  }

こういったコードになると考えているのですが、
画面の幅を変えるごとにmargin-topの値を変える計算式を教えていただけないでしょうか？
よろしくお願いします！

行動規範の内容に同意します

回答1件

ベストアンサー

jQueryを使わなくても、HTML, CSSだけで実現できます。
例えば、

html
1  <section class="main">      
2    <div class="boxWrapper">
3      <img src="http://placehold.jp/300x200.png" class="box">
4    </div><!-- /.boxWrapper -->
5  </section><!-- /.main -->

css
1.main {
2  height: 100vh;
3  position: relative;
4}
5
6.box {
7  position: absolute;
8  top: 50%;
9  left: 50%;
10  transform: translate(-50%, -50%)
11}