css - 在 div 内居中，这两个 div 都以 div 为中心并且更大，其父级取决于文档宽度

Question

我在一个 div 中有一个 div，子元素都位于其父元素的中心并且比父元素大，因此它在它的两侧均等地溢出。 child 里面有另一个带有一些文本的 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

您需要像这样为主体(或绝对定位元素对齐所依据的父容器)设置一个最小宽度

body
{
    min-width: 600px;
}

这将防止绝对定位的旅行

FIDDLE