以谷歌地图 iframe 为中心答案

【问题标题】：centering a google maps iframe以谷歌地图 iframe 为中心
【发布时间】：2017-03-21 22:29:51
【问题描述】：

您好，我对 CSS 不是很熟悉，但是我需要一个谷歌地图才能以我的页面为中心，我当前的代码不能按照我想要的方式工作。 :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;那没有用。

【问题讨论】：

标签： html css positioning center

【解决方案1】：

通常有两种方法可以使元素居中，如果它是display:block，那么只要它有一个width 集，你就可以margin-right:auto;margin-left:auto;。如果是display:inline，那么您可以在其父级上使用text-align:center

【讨论】：

【解决方案2】：

使用下面的

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

http://jsfiddle.net/hcwy81oj/

【讨论】：

【解决方案3】：

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

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

如果这可以帮助任何人......

【讨论】：

【解决方案4】：

如果 iframe 位于具有固定宽度的元素内，则 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>

【讨论】：