html - div叠加和居中

Question

我正在使用谷歌地图 API 并尝试将生成的 map 设置为背景。

这是我的 HTML

<div class="content">
  <div class="map"></div>
  <div class="element"></div>
</div>

CSS

.content {
  position: relative;
  height: 500px;
}

.map {
  position: absolute;
  width: 100%;
  height: 100%;
}

.element {
  position: absolute;
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

网站应该是这样的

|-------------------------------------|
|                                     |
|                                     |
|                                     | <- Other content
|                                     |
|-------------------------------------|
|.map |-------------------------|     |
|     |.element                 |     | <- The concerned content (.content)
|     |                         |     |
|     |-------------------------|     |
|-------------------------------------|

但是结果不一样。自动留边距当然不起作用。叠加是可以的，右边距也是，但是我怎么能为左边距做呢？我的网站必须始终居中。

谢谢。

Allan 的解决方案:

.content {
  position: relative;
  height: 500px;
}

.map {
  position: absolute;
  width: 100%;
  height: 100%;

  z-index: 0;
}

.element {
  position: relative;

  width: 900px;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

Answer 1

使用:

.element {
  left:50%;
  margin-left:-450px;
  position:absolute;
  z-index:1;
}

由于该元素的宽度为 900 像素(已明确声明)，因此您可以通过这种方式将其定位在中心左侧 450 像素的位置 - 使整个元素居中。

请记住，当浏览器宽度缩小到 900 像素以下时，这会产生一些意想不到的结果 - 如果相关，您需要使用媒体查询来捕获它。