当屏幕不够大时，将向左对齐的绝对 div 水平居中答案

【问题标题】：Horizontally centering an absolute div that will align to the left when screen isn't large enough当屏幕不够大时，将向左对齐的绝对 div 水平居中
【发布时间】：2012-09-23 09:49:11
【问题描述】：

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

我可以使用以下 CSS 实现这一点

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

（在http://jsbin.com/eruwep/2/edit完成测试）

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

有没有办法在页面足够大时使其居中，否则左对齐（仅使用 CSS）？

【问题讨论】：

标签： css css-position centering

【解决方案1】：

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

将您在问题中提到的 CSS 更改为以下内容即可：

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

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

【讨论】：

在我的情况下，容器上的相对位置有效，好点！

【解决方案2】：

您可以尝试媒体查询：http://jsfiddle.net/RfUZj/

【讨论】：

当元素具有“位置：绝对”时似乎不起作用（jsfiddle.net/T7w6z）
我给了你一个更简单的语义替代方案，如果你想让元素四处移动，绝对位置并不好，将你的代码更改为使用 margin: 0 auto;
子 div 相对于它们的父容器定位（因此位置：绝对），而不是相对于它们的默认位置（位置：相对）