JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
            <div class="left">&nbsp;</div>
            <div class="image">
                <img src="http://www.ricoh.com/r_dc/r/r8/img/sample_10.jpg" height="150" width="120" alt="image" />
            </div>
            <div class="right">&nbsp;</div>
        </div>

CSS

.main
            {
                width: 100%;
                margin: 0 auto;
                position: relative;
            }
            .left{
                float: left;
                width: 50%;
                background: #FF0000;
            }
            .right{
                float: right;
                width: 50%;
                background: #FFFF00;
            }
            .image{
               position: absolute;
            }

JavaScript

$(document).ready(function (){
                $(".image").css('right',($(".main").width()/2)-($(".image").width()/2));
            });