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

Answer 2

您可以#popup{position: relative;top: 50%;}并将其与top: ((div height / 2) - popup height) top: 130px

对齐

Answer 3

您可以使用计算功能。

左：calc（50％ - 200px）; // 50％ - （弹出窗口宽度/ 2）

http://caniuse.com/calc（检查与所有设备和浏览器的兼容性）

#container {
  background-color: black;
  height: 300px;
  width: 200px;
  margin:auto;
  position: relative;
}
#popup {
  position: absolute;
  width: 400px; // width of popup
  background-color: #0a0;
  height: 20px;
  top: 100px;
  left:calc(50% - 200px); // 50% - (width of popup/2)
  right: 0;
  margin: auto;
}

在上面的情况下，弹出窗口的宽度是400px。我们必须在中心对齐弹出窗口，因此我们将使用left：50％。这会将弹出窗口的y位置与中心对齐。现在我们必须减去半个弹出窗口以使其居中。

希望这有帮助。

Answer 4

如果您将左右值更改为-25％，它应该可以正常工作。

#popup {
    left: -25%;
    right: -25%;
}

CSS：如何将容器中心的元素居中？

4 个答案: