JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="slider" class="nivoSlider">
    <div class="image-placeholder"></div>
  </div>

  <div id="htmlcaption">
    <div class="nivo-caption">Simple. <br> Clean.</div>
  </div>
  </div>

CSS

.image-placeholder{
  height:400px;
  width:100%;
  background-color:#e3e3e3;
}

#htmlcaption{
  display:block;
}

 .nivo-caption {
    position: absolute;
    margin:auto;
    left:0px;
    top:15%;
    overflow:hidden;
    background:none;
    /* font-family: 'Gotham'; */ /* don't have this font */
    color:#FFF;
    font-weight:bold;
    font-size:50px;
    line-height:44px;
    text-align:center;
    text-transform:uppercase; /* converts text to UPPERCASE */
}

JavaScript

//Run once when the page first loads
$(document).ready(function(){
	centerCaption();
});

//Run when the window is resized. Use a timeout to offset function calls in case the window is resized a lot very quickly.
$(window).resize(function(){
	setTimeout(function(){
		centerCaption();
  }, 150);
});

function centerCaption(){
		var caption = $('.nivo-caption');
		caption.css('left', ($('#slider').width() - caption.width()) / 2);
}