居中 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

使用以下内容

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

http://jsfiddle.net/hcwy81oj/

Answer 2

通常有两种居中元素的方法，如果它是 display:block 那么你可以 margin-right:auto;margin-left:auto; 只要它有 width 集。如果它是 display:inline 那么你可以在它的父

上使用 text-align:center

Answer 3

您也不需要添加 div。你可以在里面给它一个class。

<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>

居中 google 地图 iframe

centering a google maps iframe

html

css

positioning

center