JSFiddle - React, Tailwind, and code Playground

HTML

<div class="metaslider metaslider-flex metaslider-364 ml-slider">
    
    <div id="metaslider_container_364">
        <div id="metaslider_364" class="flexslider">
            <ul class="slides">
                <li class="slide-370 ms-image">
	                <img src="http://placehold.it/700x300" height="300" width="700" alt="" class="slider-364 slide-370" />
	                <div class="caption-wrap">
	                	<div class="caption">
	                		<h2>Can I place this in centre?</h2>
	                	</div>
	                </div>
                </li>
            </ul>
    	</div>
    </div>
    
</div>

CSS

.caption-wrap {
   position: absolute; 
   top: 45%; 
   left: 0;
   text-align: center; 
   width: 100%; 
}

.caption-wrap span { 
	color: red;
	font-weight: 300;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 15px;
	pointer-events: none;

}

.metaslider {
  position:relative;
}