Question

如何在CSS中水平居中10000px（或其他比全屏宽）的div？

e.g。

#widerdiv{
    width:10000px;
    height:100px;
    border:#009933 1px solid;
}

似乎“margin：0 auto”在这种情况下不起作用

Answer 1

尝试添加类似于

的内容

position: absolute;
left: 50%;
margin-left: -5000px;

Answer 2

尽管宽度太荒谬了，但我有两种解决方案。

边距不起作用，因为它没有任何东西可以与之对齐，所以这里有两种可能性。

第一个解决方案：使用div来包装它。 JsFiddle和以下代码：

<div id="wrapper">
    <div id="widerdiv"></div>
</div>

第一个解决方案的CSS

#wrapper{
    width: 1000px
}
#widerdiv {
    width:500px;
    height:100px;
    border:#009933 1px solid;
    margin: 0 auto;
}

第二个解决方案：定义您的身体宽度。 JsFiddle和下面的代码（仅限CSS，因为我不会修改您的HTML）：

body{
    width: 1000px
}
#widerdiv {
    width:500px;
    height:100px;
    border:#009933 1px solid;
    margin: 0 auto;
}

现在，通过一切必要的方式，你可以使宽度尽可能大（天堂禁止水平滚动......）但是如果你玩那些JsFiddles，你会发现你绝对需要定义一个这个Div所在的宽度。

最后，Almanac将成为你的朋友。作为快速细分，如果您决定尝试垂直定位，这就是当您使用'margin：0 auto;'时会发生的情况。在CSS中：

"The element is given a specified width
The left and right margins are set to auto
Without the specified width, the auto values would 
essentially have no effect, setting the left and right 
margins to 0 or else to whatever is the available space 
inside the parent element.

It should also be pointed out that auto is useful 
only for horizontal centering, and so using auto for
top and bottom margins will not center an element horizontally, 
which can be confusing for beginners."

以上引用也在Almanac中引用。

如何在CSS中水平居中10000px（宽于全屏幕）的div？

2 个答案: