JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<div class="your-centered-div">
    <img src="http://placehold.it/1120x630&text=Pretend Video 560x315" alt="" />
</div>

CSS

/* key stuff */
.your-centered-div {
    max-width: 560px; /* you have to have a size or this method doesn't work */
    max-height: 315px;
    
    position: absolute; /* positions according to the nearest parent */
    top: 0; right: 0; /* confuse it i guess */
    bottom: 0; left: 0;
    margin: auto; /* make em equal */
}



















/* this stuff is probably already in your styles */


* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    border: 2px solid red;
}





.your-centered-div img {
    display: block;
    width: 100%;
    height: auto;
}