Fully center an Iframe in its container

Table-cell applied on the container so the iframe is the content According to specs the browser will insert dummy elements where it needs to render the cell correctly and fully centre and to contain its content and if it need, grow with it.

HTML

<div class="container">
	<div class="ratio">
		<iframe scrolling="no" src="https://www.youtube.com/embed/YL9RetC0ook"></iframe>
	</div>
</div>

CSS

.container {
	display:table-cell; /* (specs: omitted table parts, the browser will insert mandatory elements in the dom tree) */
	padding:; /* optional, margins ignored */
	width:100vw; /* any value */
	height:1vh; /* expands by the content */
	background:tan; /* bg-colors just for demo testing */
	vertical-align:middle;
	text-align:center;
}
.container .ratio{
	display:inline-block;
	position:relative;
	padding-bottom:56%; /* keeps the 16/9 ratio */
	width:100%;
	height:0;
	overflow:hidden; /* hide eventual black bars */
	background:red;
	vertical-align:middle;
}
.container iframe {
	position:absolute; /* to be ratio consistent */
	top:-.5%;
	left:-.5%; /* overflow eventual black bars */
	border:0;
	width:101%; /* grow some to avoid thinner black bars */
	height:101%;
	overflow:hidden; /* for html5 browsers the html attribute is depreciated */
	background:gold;
	vertical-align:middle; /* remove the textline's descendent space */
}