Center an iframe for desktop and mobile - html

Question

I can't manage to get my Google Maps iframe to be centered on the page. I want the iframe to be responsive also. How can I make it responsive and centered? Below is my code.
CSS:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
HTML:
<div class="video-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1shr!2shr!4v1472200012915!6m8!1m7!1sF%3A-DjYDCrslZys%2FV79nfhQh6CI%2FAAAAAAAAC4Y%2F_3uT6StsL1YugvYPQXUgUGfAF_jN1MVzgCLIB!2m2!1d45.81664123898513!2d15.8375560739745!3f73.63479769484006!4f-19.58591212686629!5f0.4000000000000002" frameborder="0" width="560" height="315" allowfullscreen></iframe>
</div>

Answer 1

Just use text-align:center; on your div. https://jsfiddle.net/w0et2jz1/

Answer 2

Try the below style:
.video-container {
margin: 0 auto;
width: 560px !important;
}
Hope, it will help you for desktop

Answer 3

Here is my solution. Do have a look and let me know if its still not the way you wanted. Thanks.
CSS:
.video-container {
max-width: 70%;
height: auto;
border: 1px solid black;
margin: auto;
}
iframe {
width: 100%;
height: 50%;
}

Answer 4

For your situation if you need it to be fixed width and height on desktop but then be responsive you would need to add one more wrapping div and set the following css.
.container {
position: relative;
max-width: 560px;
margin: 0 auto;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="container">
<div class="video-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1shr!2shr!4v1472200012915!6m8!1m7!1sF%3A-DjYDCrslZys%2FV79nfhQh6CI%2FAAAAAAAAC4Y%2F_3uT6StsL1YugvYPQXUgUGfAF_jN1MVzgCLIB!2m2!1d45.81664123898513!2d15.8375560739745!3f73.63479769484006!4f-19.58591212686629!5f0.4000000000000002"
frameborder="0" width="560" height="315" allowfullscreen></iframe>
</div>
</div>
This will make the iframe 560px wide and 315px in height on desktops but then scale down nicely on mobile.
Here's a JSFiddle