How to center an iframe, responsive

Tags: css,iframe,responsive-design,center

Problem :

I have this small part of html code, and like to the iframe just the half size, but centered of the page:

Here is the page:

<div class="row">
<div class="map-container">
<iframe src="!1m0!3m2!1sen!2s!4v1451982933747!6m8!1m7!1sIT5z6S82FJMAAAQZdjRuFQ!2m2!1d34.238620415813!2d-77.94889641093141!3f55.18!4f0!5f0.7820865974627469" height="250" width="600"></iframe>

and her my css:

.map-container {
  position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;

/* 16x9 Aspect Ratio */
.map-container-16x9 {
  padding-bottom: 56.25%;

/* 4x3 Aspect Ratio */
.map-container-4x3 {
  padding-bottom: 75%;

.map-container iframe {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;

Any idea how to do it correct?

Solution :

Would this be what you're trying to do ?

.map-container iframe {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;

Or this ? (without absolute positioning)

.map-container iframe {
    width: 50%;
    display: block;      
    margin: auto;

It depends if you want to center it vertically as well or not.

    CSS Howto..

    CSS, how to put a div inside a div that is responsive?

    css make img shown when hover a li

    how to override the ice:commandLink css

    How to use top middle and center inside a div

    How to create slanted tabs with a border in CSS? [duplicate]

    How to select the first type of child of a particular CSS using CSS selector [duplicate]

    How put a top border to a title that only cover the letters in css

    How to dynamically change element alignment?

    How to apply CSS to a Mac Chrome Select Box?

    CSS: How to make consecutive lines in Paragraph Go over Left Floated Image with height

    How to control child div height of a flex item

    CSS positioning: how to make it relative to one element but not the other?

    How to use CSS to modify an icon with the bootstrap collapse

    how to show text in a button with css

    How to use these ruby based CSS stylsheet frameworks languages?

    How to make edgy corners with css

    CSS: How to select only the first non-adjacent sibling after the element

    How to flip which side a progress bar begins at with CSS

    How to put text over img on hover - width and height are variable

    How do I draw a Diagonal div?

    How to execute select() method on polymer elements based on URL?

    How to change content of a div after link click using CSS :target?

    How to output CSS counter from Sass mixin

    How do I center a button in html5?

    CSS How to make element in the middle to shrink before its sibling jumps down

    How can I get this element to clear the image so it sits in middle off the page on top of the background

    How do I insert content after text in an html element using CSS?

    How to assign C# variable to CSS class variable in ASP.NET MVC ActionLink

    How to add a class to select_tag in Ruby on Rails

    How to implement single-line ellipsis with CSS