css - 在 div 中居中，即在 div 中居中且更大，其父级取决于文档宽度

Question

我在 div 中有一个 div，子元素都以父元素为中心，并且比父元素大，使其在两侧溢出。孩子里面有另一个 div，里面有一些文字。

<div class="outer">
    <div class="inner">
        <div class="text">
            testing testing
        </div>
    </div>
</div>

CSS：

.outer
{
    width: 400px;
    height: 400px;
    background: beige;
    margin: 0 auto;

}

.inner
{
    width: 600px;
    height: 200px;
    background: pink;
    position: absolute;
    left:0;right:0;
    margin: auto;
}

.text
{
   margin-left: auto;
   margin-right: auto;
   width: 400px;
}

http://jsfiddle.net/msVVD/4/

现在，如果通过调整浏览器窗口的大小来缩小文档宽度，或者在 jsfiddle 的情况下，通过拖动“JavaScript”和“Result”之间的句柄来调整大小，文本将不会停留在相同的水平位置，而是“旅行”到正确的。

为什么？

Answer 1

您没有.inner相对于元素定位元素.outer。添加position: relative到.outer.

CSS 中的更改：

.outer
{
    width: 400px;
    height: 400px;
    background: beige;
    margin: 0 auto;
    position: relative;
}

.inner
{
    width: 600px;
    height: 200px;
    background: pink;
    position: absolute;
    left:0;right:0;
    margin: auto;
    margin-left: -100px;
    padding-left: 100px;
}

小提琴：http: //jsfiddle.net/msVVD/7/

Answer 2

您需要为主体（或绝对定位元素对齐的父容器）设置一个最小宽度，如下所示

body
{
    min-width: 600px;
}

这将防止绝对定位的移动

小提琴