JSFiddle - React, Tailwind, and code Playground

HTML

<div class="portfolio-item">
				<a href="#" rel="bookmark">
                    <img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg"/>
					<div class="hover-in">
						<p>portfolio Name</p>
					</div>
				</a>
			</div>
    <div class="portfolio-item">
				<a href="#" rel="bookmark">
					<img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg">
					<div class="hover-in">
						<p>Portfolio Name</p>
					</div>
				</a>
			</div>
        <div class="portfolio-item">
				<a href="#" rel="bookmark">
					<img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg">
					<div class="hover-in">
						<p>Portfolio Name</p>
					</div>
				</a>
			</div>

CSS

/* Portfolio */
.portfolio-item {
margin: 0;
width: 33%;
height: auto;
float: left;
padding: 0;

    
position:relative;
}

/*center*/
.portfolio-item .hover-in
{
    /*X*/
    width:100%;
    text-align: center;
    
    /*Y*/
    position: absolute;
    top:50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.portfolio-item .attachment-post-thumbnail {
margin: 0;
height: 100%;
width: 100%;
transition: .5s;
}