How to center an iframe horizontally?

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

.container {

position: relative;

width: 50%;

overflow: hidden;

padding-top:30%; /* 1:1 Aspect Ratio */

}

.responsive-iframe {

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

width: 100%;

height: 100%;

border: none;

}

</style>

</head>

<body>

<h2>Responsive Iframe</h2>

<h3>Maintain Aspect Ratio 1:1</h3>

<p>Resize the window to see the effect.</p>

<div class="container" align="center">

<iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>

</div>

</body>

</html>

Python Learning