JSFiddle - React, Tailwind, and code Playground

HTML

<ol id="list">
    <li>frog</li>
    <li>fish</li>
    <li>flamingo</li>
    <li>ferret</li>
    <li>frog</li>
    <li>fish</li>
    <li>flamingo</li>
    <li><div id="marked">fox</div></li>
    <li>frog</li>
    <li>fish</li>
    <li>flamingo</li>
    <li>frog</li>
    <li>fish</li>
    <li>flamingo</li>
    <li>ferret</li>
</ol>

CSS

ol{
height:100px;
    border:1px solid #000;
    overflow:auto;
}

JavaScript

$(document).ready(function(){   
    function centerOnElem(elem){
        function arrayObjectIndexOf(myArray, searchTerm) {
            for(var i = 0, len = myArray.length; i < len; i++) {
                if (myArray[i].firstChild === searchTerm) return i;
            }
            return -1;
        }
        
        var list = document.getElementById('list'),
            listItems = list.children,
            listItemHeight = list.scrollHeight / listItems.length,
            target = elem,
            index = arrayObjectIndexOf(listItems, target);
        
        list.scrollTop = (index * listItemHeight) - ((list.clientHeight - listItemHeight) / 2);
        //(height of elements above element) minus (half the height of the div, not including the listitemwe are centering on)
    }
    
    centerOnElem(document.getElementById('marked'));
});