Centratura barra di scorrimento div genitore, con larghezza dinamica

Question

Ho un div genitore e un canvas figlio, voglio centrare la barra di scorrimento del div genitore perché non posso aggiungere alcuno stile al canvas nel mio progetto.

#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>

In questo frammento, i margini sulla tela sono per la demo perché la tela ha larghezza e altezza diverse ed è centrata.
Voglio solo scorrere il div genitore dove la tela interna diventa al centro. L'ho fatto ma nessun risultato adeguato

$(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>

Riferimento al codice sopra: Come posizionare la barra di scorrimento orizzontale al centro di DIV
Se vuoi controllare nel dominio live cosa sto facendo: https://mypagemaker.s3.amazonaws.com/index.html

Answer 1

Devi avvolgere il div genitore in un div genitore più alto.

$(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>