html - CSS:如何将比容器大的元素居中？

Question

我的元素有 800px 并且容器更小(它是响应式的，所以宽度在变化)，我有这样的代码:

<div id="container">
   <div id="popup">
   </div>
</div>

和CSS:

#container { width: 400px; position: relative; }
#popup { width: 800px; position: absolute; }

我试过 left: 0, right: 0, margin: auto; 但它不起作用，因为框是左对齐的。

这里是 jsbin

Answer 1

您可以使用 margin-left: -(half width)px 和 left: 50%

所以你的代码弹出 css 代码看起来像:

#popup {
  position: absolute;
  width: 300px;
  background-color: #0a0;
  height: 20px;
  top: 100px;
  left: 50%;
  margin-left: -150px;
  z-index: 100;
}