動的な幅を持つ親divスクロールバーを中央に配置

Question

親divと子キャンバスが1つずつありますが、プロジェクトのキャンバスにスタイルを追加できないため、親divのスクロールバーを中央に配置したいと思います。

#parent{
  width:80vw;
  height:200px;
  border:1px blue solid;
  overflow-x:scroll;
}
#parent #child{
  width:70vw;
  border:1px solid black;
  margin-left:50px;
  margin-right:50px;
}

<div id="parent">
  <canvas id="child">
  </canvas>
</div>

このスニペットでは、キャンバスの幅と高さが異なり、中央に配置されているため、キャンバスの余白はデモ用です。
内側のキャンバスが中央になる親divをスクロールしたいだけです。私はこれをしましたが、適切な結果はありません

$(document).ready(function(){ var parent = $("#parent");
  var child = $("#child");
  var final = (child.width() - parent.width()) / 2;
  parent.scrollLeft(final);
  console.log(final)
});

#parent{
  width:90vw;
  height:200px;
  border:1px blue solid;
  overflow-x:scroll;
}
#parent #child{
  width:80vw;
  border:1px solid black;
  margin-left:50px;
  margin-right:50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
  <canvas id="child">
  </canvas>
</div>

上記のコードへの参照： DIVの中央に水平スクロールバーを配置する方法
ライブドメインでチェックインする場合、私は何をしていますか？ https://mypagemaker.s3.amazonaws.com/index.html

Answer 1

親のdivを背の高い親のdivでラップする必要があります。

$(document).ready(function(){ var parent = $('#parent');
   var parent_sub = $('#parent > #parent_sub'); 
   var final = (parent_sub.width() - parent.width())/2;
   parent.scrollLeft(final);
   console.log(final);
});

#parent {
    width:90vw;
    overflow-x:scroll;
    height:200px;
    border:1px blue solid;
}

#parent_sub {
    display: table;
}

#parent #child{
  width:80vw;
  border:1px solid black;
  margin-left:50px;
  margin-right:50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
  <div id="parent_sub">
    <canvas id="child">
    </canvas>
  </div>
</div>