CSS - Centering an image

At first glance this may seem simple but I have been struggling with this all morning and now I am crying uncle! Here we go....

I have the following code...

<div class="panel-body">
	<article id="post-294" class="post-294 post type-post status-publish format-standard has-post-thumbnail hentry category-development">
		<div class="img-responsive">
			<figure class="imghvr-push-up">
				<img alt="" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" height="210" sizes="(max-width: 360px) 100vw, 360px" src="http://server/wp-content/uploads/2017/02/Team.jpg" srcset="http://server/wp-content/uploads/2017/02/Team.jpg 360w, http://server/wp-content/uploads/2017/02/Team-300x175.jpg 300w" width="360" />
				<figcaption>
				<h4>Title Text</h4>
				<p><strong>Title Text</strong> Blurb</p>
				</figcaption>
				<a href="http://server/training-days/"></a>
			</figure>
		</div>
	</article>
</div>

Select allOpen in new window

I am trying to center the image inside the figure html tag. Right now, the image is left justified and I cannot get it to center to save my life. Below is some of the CSS code controlling the elements. If you need more let me know.

/*media all*/
.panel-body {
    padding: 15px;
}
/*media all*/
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}
/*media all*/
.carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
    display: block;
    max-width: 100%;
    height: auto;
}
/*media all*/
[class^='imghvr-'], [class*=' imghvr-'] {
    position: relative;
    display: inline-block;
    margin: 0px;
    max-width: 100%;
    background-color: #2266a5;
    color: #fff;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transform: translateZ(0);
    transform: translateZ(0px);
}
/*media all*/
[class^='imghvr-'] > img, [class*=' imghvr-'] > img {
    vertical-align: top;
    max-width: 100%;
}
/*media all*/
img {
    max-width: 100%;
    height: auto;
    margin: 0 0 10px 0;
}
/*media all*/
#home-promo1 .panel-body img {
    margin: auto;
}

Select allOpen in new window

Here is a link to the image hover affect website being applied to my image. Not sure if it helps but I want to give some context to what I am working with.

Thanks in advance for any help you can offer. - Joe