JSFiddle - React, Tailwind, and code Playground

HTML

<section class="viewport">
    <ul class="item-list">
        <li class="item">A
        <li class="item">B
        <li class="item">C
        <li class="item">D
        <li class="item">E
        <li class="item">F
        <li class="item">G
    </ul>
</section>

CSS

.viewport {
    position: relative;
    background-color: lightgrey;
    overflow: hidden;
    height: 200px;
    width: 100%;
}

.viewport:before {
    content: '';
    position: absolute;
    height: 100%;
    border: 1px solid black;
    /*left: -webkit-calc(50% - 1px);*/
    left: 400px;
}

.item-list {
    list-style-type: none;
    width: 7000px;    

    /*-webkit-transform: translateX(-300px);*/
}

.item {
   display: inline-block;   
   background-color: green;
   margin: 0;
   padding: 0;
   height: 100px;
   width: 50px; 
}

JavaScript

// give each item a random width
$('.item').each(function(i, item) {
   var width = Math.random() * 200 + 50;
   $(item).width(width);
});

middleOffset = 400; // from comments

middleItem = $(".item").get().sort(function(a,b){
    var $a = $(a), $b = $(b);
    var aDiff = Math.abs(($a.offset().left +$a.width()/2) - middleOffset);
    var bDiff = Math.abs(($b.offset().left +$b.width()/2) - middleOffset);
    return aDiff == bDiff ? 0 : aDiff > bDiff ? 1 : -1;
})[0];
$(middleItem).css("background-color","blue");