css - 水平居中绝对 div，当屏幕不够大时，它会向左对齐

Question

我有一个绝对定位的 div(因为它包含本身绝对定位的子 div)，我希望它水平居中。

我可以使用下面的 CSS 实现它

width : 512px;
position : absolute;
left : 50%;
margin-left :-256px; // half width of div

(在 http://jsbin.com/eruwep/2/edit 中完成测试)

但是当窗口不够大时，div 会向左溢出。

有没有办法在页面足够大时使其居中，但在其他情况下(仅使用 CSS)左对齐？

Answer 1

为什么要对容器使用 position: absolute？如果只是因为您希望其绝对定位的子级相对于它们的容器定位，那么您不需要 absolute 。 static 以外的任何值都可以做到这一点。

将您在问题中提到的 CSS 更改为以下内容将使其起作用:

width : 512px;
position : relative;
margin : auto;

示例:http://jsbin.com/eruwep/3/edit