JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<div class="container-fluid">

	<div id="page">
	 
<!-- GRID ITEM -->
        <div class="item s1">
            <a href="#">
                <div class="grid-image">
				    <img         src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Pleiades_large.jpg/1024px-Pleiades_large.jpg">
                </div>
                <div class="item-caption">
                    <div><h5>I want this to be center</h5></div>
                </div>
            </a>
        </div>
<!-- /GRID ITEM -->

    </div>
</div>



</body>
</html>

CSS

#page .item {
    width: calc(16.66% - 10px);
    display: inline-block;
    height: 0;
    float: left;
    padding-bottom: 16.66%;
    overflow: hidden;
    background-color: salmon;
    margin: 5px;
    position: relative;
}

#page .item.s1 {
    width: calc(50% - 10px);
    padding-bottom: 50%;
    overflow: hidden;
    background-color: navy;
}

.item > a {
	/* position: relative; */
	display: block;
	overflow: hidden;
    color: white;
}
.item:hover .grid-image:after {
	background: rgba(0, 0, 0, .7);
}
.item:hover .grid-image > img {
	-webkit-transform: scale(1.1);
	   -moz-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	     -o-transform: scale(1.1);
	        transform: scale(1.1);

}
.item:hover .item-caption {
	opacity: 1;
	z-index: 3;
  visibility: visible;

}
.item-caption,
.grid-image > img,
.grid-image:after {
	-webkit-transition: all 0.3s ease-in-out 0s;
	   -moz-transition: all 0.3s ease-in-out 0s;
		-ms-transition: all 0.3s ease-in-out 0s;
		 -o-transition: all 0.3s ease-in-out 0s;
			transition: all 0.3s ease-in-out 0s;
}
.item-caption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  text-align: center;
  opacity: 0;
    
    display:table;
    height: 100%;
    width: 100%;
}

.item-caption > div {
        display: table-cell;
    height: 100%;
    vertical-align: middle;
}

.grid-image {
	position: relative;
	overflow: hidden;
}

.grid-image img {
	display: block;
	overflow: hidden;
}

.grid-image:after {
	position: absolute;
	display: block;
	content: "";
  height: 100%;
  width: 100%;
	top: 0;
	left: 0;
}

JavaScript

var $container = $('#page');
$container.masonry({
columnWidth: '.grid-sizer',
itemSelector: '.item',
percentPosition: true,
gutter: 10
});