JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mediaContainer mediaCenterContainer">
	<div class="imageContainer">
        <img src="http://dummyimage.com/1920x1080/000/fff.png&text=This+is+a+flex+box+test+for+Firefox+340x2B.+In+Chrome,+the+image+will+be+max-width:+1000x25.+In+Firefox+the+image+will+be+centered,+but+not+have+a+constrained+width." class="Image Tag Crop" alt="My Dog" data-realwidth="1000" data-realheight="670" data-scalewidth="944" data-scaleheight="633" />
	</div>
</div>

CSS

.mediaContainer
{
	zoom: 1;
	overflow: visible;
	position: relative;
}

.mediaCenterContainer
{
	display: flex;
	justify-content: center;
	align-items: center;
}

.imageContainer
{
	margin: 0 auto;
}

.imageContainer img
{
	margin-bottom: 10px;
	max-width: 100%;
}