центрирование карт google iframe

Question

Привет, я не очень хорошо знаком с CSS, однако мне нужно, чтобы карты Google были сосредоточены на моей странице, мой текущий код не работает так, как я этого хочу. : S

вот мой HTML

<div class="maps"> 
<iframe src="https://www.google.com/maps/d/embed?mid=zZVPDX7DZETc.kFjAmXvee3Zc" width="512" height="384"></iframe> 
</div> 

и вот мой CSS

.maps { 
position: absolute; 
    top: 50%; 
    left: 35%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%) } 

, что я делаю неправильно? Я также пробовал использовать margin-right/left: auto; это не сработало.

Answer 1

Есть обычно два способа центрирования элемента, если это display:block, то вы можете margin-right:auto;margin-left:auto; до тех пор, как это имеет width набор. Если это display:inline, то вы можете использовать text-align:center у своего родителя

Answer 2

Используйте следующую

.maps { 
    width: 512px; 
    display: block; 
    margin: 0 auto; 
} 

http://jsfiddle.net/hcwy81oj/

Answer 3

Вам также не нужно добавлять div. Вы можете просто дать ему класс внутри.

<iframe src="https://www.google.com/maps/d/embed?mid=zZVPDX7DZETc.kFjAmXvee3Zc" width="512" height="384" class="map"></iframe> 

Если это может помочь любому ...

Answer 4

Если IFrame находится в пределах элемента с фиксированной шириной, с Google по умолчанию на код IFrame Вложить:

<div style="margin:0 auto;"> 

<iframe src="https://www.google.com/maps/embed?pb=YourMap" width="600" height="450" frameborder="0" style="border:0; margin:0 auto;" allowfullscreen></iframe> 

</div>