html - 居中谷歌地图 iframe

Question

您好，我不太熟悉 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;那没有用。

Answer 1

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