Centering iframe div - html

Question

When coding an iframe to resize with the screen I cannot center it. I tried all the responses from THIS question but had no luck. Am I missing something obvious or is there no way to do this?
HTML
<div class="videoWrap">
<iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe>
</div>
CSS
.videoWrap {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrap iframe {
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 100%;
}

Answer 1

Using the question you linked...
.videoWrap {
display: flex;
align-items: center;
justify-content: center;
}
.videoWrap iframe {
width: 300px;
height: 300px;
}
div, body, html {
height: 100%;
width: 100%;
}
<div class="videoWrap">
<iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe>
</div>

Answer 2

You can try applying margin: auto; css property to your div.
https://www.w3schools.com/css/css_align.asp

Answer 3

In my example I am centering the wrapper element horizontally and vertically with the usual settings (position: absolute` is applied here), and also defining the width and height here. The video itself simply fills the centered wrapper.
html, body {
height: 100%;
margin: 0;
}
.videoWrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 16:9 */
width: 80vw;
height: 45vw;
}
.videoWrap iframe {
width: 100%;
height: 100%;
}
<div class="videoWrap">
<iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe>
</div>

Answer 4

Use left: 50% and transform: translateX(-50%):
.videoWrap {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrap iframe {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 100%;
}