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

【问题标题】：How can I center align an element that is larger than 100% of the entire page?如何居中对齐大于整个页面 100% 的元素？
【发布时间】：2011-09-24 13:58:51
【问题描述】：

我有一个 100% 的 div 宽度和一个隐藏的溢出，其中包含一个宽度为 3000 像素的 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，无论是解决问题所必需的。谢谢！

【问题讨论】：

您可能需要 js 来确定屏幕尺寸并使用负边距。
您应该标记/选中 @locrizak 答案旁边的勾号以接受它作为答案。

标签： css hidden centering

【解决方案1】：

你可以用 CSS 做到这一点：

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

只要确保父母有一个position: absolute/relative就可以了

【讨论】：

很好的解决方案。非常感谢。

【解决方案2】：

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

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

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

【讨论】：