Как прокрутить элемент до середины родительского элемента без прокрутки всего окна?

Question

Отказ от ответственности: Пожалуйста, не используйте решения jQuery, я не могу его использовать.

У меня есть родительский элемент, который я хочу прокрутить, когда дочерний элемент находится над

ex:

<style>
.container-of-labels {
  background-color: green;
  height: 20px;
  overflow-y: auto;
}
</style>

<div class="container-of-labels>
  <label id="l1">1</label>
  <label id="l2">2</label>
  <label id="l3">3</label>
</div>

Js:

//This runs 'onmouseenter'

function(childIndex) {
  const l = document.getElementById(`l${childIndex}`);

  // l.parentNode.scrollTop = l.offsetTop;

  //l.parentNode.scrollTop = l.offsetTop - l.parentNode.offsetTop

  /*
  l.scrollIntoView({
    behavior: 'smooth',
    block: 'center',
    inline: 'nearest'
  });
  */

Это должно взять полосу прокрутки родителей и переместить ее вниз, чтобы расположить ярлык по центру, но вместо этого действует глючно, как описано ниже.

  l.parentNode.scrollTop = l.offsetTop;
  l.parentNode.scrollTop = l.offsetTop - l.parentNode.offsetTop;

Это прокручивает до нижней части div, хотя смещение не всегда больше, чем высота parentNode

, в то время как

  l.scrollIntoView({
    behavior: 'smooth',
    block: 'center',
    inline: 'nearest'
  });

Прокручивает весь экран?

Есть ли способ для меня прокрутить (pref с 'scrollIntoView') от родительского div?