JSFiddle - React, Tailwind, and code Playground

by Alexander L

HTML

<div class="row  media-thumbs">
    <div class="col-sm-4 col-xs-12">
        <div >
            <span>Some copy should go here</span>
            <a href="#">
                <img class="img-responsive" src="http://placekitten.com/500/300"/>
            </a>
        </div>
    </div>
</div>

CSS

span
{
    position: absolute;
    width: 100%;
    text-align: center;
    color: white;
}

img
{
    width: 100%;
}

JavaScript

//that one jquery plugin - ignore
(function( $ ){

	$.fn.flexVerticalCenter = function( onAttribute ) {

		return this.each(function(){
			var $this		= $(this);              // store the object
			var attribute	= onAttribute || 'margin-top'; // the attribute to put the calculated value on
        	
			// recalculate the distance to the top of the element to keep it centered
			var resizer = function () {
				// get parent height minus own height and devide by 2
				$this.css(
					attribute, ( ( $this.parent().height() - $this.height() ) / 2 )
				);
			};

			// Call once to set.
			resizer();

			// Call on resize. Opera debounces their resize by default. 
      		$(window).resize(resizer);
      		
      		// Apply a load event to images within the element so it fires again after an image is loaded
      		$this.find('img').load(resizer);
      	
		});

	};

})( jQuery );

//actually using it


$('span').flexVerticalCenter();