如何将大于整个页面 100% 的元素居中对齐？

Question

我有一个宽度为 100% 的 div，并且隐藏了一个宽度为 3000px 的 div。我希望3000px的div左右均匀地被切断。我会使用背景位置：中心；然而，事情比这更复杂。 3000px div 包含 30 100px div。我尝试过在 3000px div 的左侧和右侧使用自动边距，但它不起作用。这是 css：

.bgAnimHolder{
    width:100%;
    height:500px;
    overflow:hidden;
    position:absolute;
    z-index:1;
    top:0px;
}

.row{
    margin: 0 auto 0 auto;
    height:500px;
    width:3000px;
}

.row div{
    width:100px;
    float:left;
    margin-top:0px;
}

无论屏幕分辨率如何，如何将 3000px div 放置在屏幕中间？我愿意使用 CSS 或 JavaScript，无论是解决问题所必需的。谢谢！

Answer 1

您可以使用 CSS 来做到这一点：

.row {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1500px; /* half of the width */
    height: 500px;
}

只需确保父级上有一个 position:absolute/relative

Answer 2

我可能不理解你的问题的根源，但你可以将容器的左边距和右边距设置为（相同的）负值。为了简洁/清晰，我的代码被简化。

div.center 
{
    margin:1em -10em; 
    background:#CCC; 
    text-align:center; 
    padding:1em;
}

<div class="center">
    <p>Lorem ipsum dolor sit amet.</p>
</div>