JSFiddle - React, Tailwind, and code Playground

HTML

<ol id="list">
 <li>Eagle
 <li>Earwig
 <li>Eastern Gorilla
 <li>Eastern Lowland Gorilla
 <li>Echidna
 <li>Edible Frog
 <li>Egyptian Mau
 <li>Electric Eel
 <li>Elephant
 <li>Elephant Seal
 <li>Elephant Shrew
 <li>Emperor Penguin
 <li>Emperor Tamarin
 <li>Emu
 <li>English Cocker Spaniel
 <li>English Shepherd
 <li>English Springer Spaniel
 <li>Entlebucher Mountain Dog
 <li>Epagneul Pont Audemer
 <li>Eskimo Dog
 <li>Estrela Mountain Dog
 <li>Falcon
 <li>Fennec Fox
 <li>Ferret
 <li>Field Spaniel
 <li>Fin Whale
 <li>Finnish Spitz
 <li>Fire-Bellied Toad
 <li>Fish
 <li>Fishing Cat
 <li>Flamingo
 <li>Flat Coat Retriever
 <li>Flounder
 <li>Fly
 <li>Flying Squirrel
 <li>Fossa
 <li><div id="marked">Fox</div>
 <li>Fox Terrier
 <li>French Bulldog
 <li>Frigatebird
 <li>Frilled Lizard
 <li>Frog
 <li>Fur Seal
 <li>Galapagos Penguin
 <li>Galapagos Tortoise
 <li>Gar
 <li>Gecko
 <li>Gentoo Penguin
 <li>Geoffroys Tamarin
 <li>Gerbil
 <li>German Pinscher
 <li>German Shepherd
 <li>Gharial
 <li>Giant African Land Snail
 <li>Giant Clam
 <li>Giant Panda Bear
 <li>Giant Schnauzer
 <li>Gibbon
 <li>Gila Monster
 <li>Giraffe
 <li>Glass Lizard
 <li>Glow Worm
 <li>Goat
 <li>Golden Lion Tamarin
 <li>Golden Oriole
 <li>Golden Retriever
 <li>Goose
 <li>Gopher
 <li>Gorilla
 <li>Grasshopper
 <li>Great Dane
 <li>Great White Shark
 <li>Greater Swiss Mountain Dog
</ol>

CSS

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

#marked {
  color:red;
}

JavaScript

var list = document.getElementById('list'),
    marked= document.getElementById('marked'),
    crm= marked.getBoundingClientRect(),
    height= crm.bottom-crm.top;

list.scrollTop= (crm.top-height)-(list.clientHeight-height)/2