0

无论用户是否调整网页大小，我都需要 div 始终位于页面的中心。

我试过使用：边距：自动；边距：0 自动；左边距：自动；边距自动；

但是这三个都不起作用。

HTML：

<div id="grayinnerbackground">
</div>

CSS：

div#grayinnerbackground {
            margin: auto;
            width:1000px;
            background-color: #D9D9D9;
            height: 100%;
            position: fixed;
            z-index: -1;
}

这是我正在谈论的一个例子的小提琴。 http://jsfiddle.net/ymvDJ/

谢谢。

4

6 回答 6

1

如果您确实希望固定仓位，请添加以下规则并放弃通常的保证金技巧：

left: 50%;
margin-left: -25px; // half the width of your element

在这里看到它：http: //jsfiddle.net/8DfnG/2/

于 2013-08-18T01:00:40.630 回答
0

删除position: fixed，更改width为50px并确保您有一个0before autoin margin: auto。

更新：

要使 div 与窗口一样高，请务必将bodyand设置html为height: 100%;：

body, html {
  height: 100%:
}

再次更新了 jsfiddle

于 2013-08-18T00:56:58.440 回答
0

这是这个 HTML：

<div id="grayinnerbackground">
    foo
</div>

CSS：

div#grayinnerbackground {
            margin: auto;
            width: 50px;
            background-color: #ccc;
            height: 100%;
}

我不完全确定为什么在我将文本放入 div 之前它不起作用，现在检查一些东西。

更新

叹息，好吧，我累了。如果 div 是空的，并且您的高度为 100%，那么它将是其父级高度的 100%，<body>在这种情况下。由于没有其他内容，因此<body>高度为 0。给<div>绝对高度，它会弹出：

div#grayinnerbackground {
            margin: auto;
            width: 50px;
            background-color: #ccc;
            height: 10px;
}
于 2013-08-18T00:59:10.310 回答
0

您可以使用

position: fixed;
left: 50%;
width: 50px;
margin-left: -25px; /* width ÷ 2 */

演示：http: //jsfiddle.net/ymvDJ/3/

于 2013-08-18T01:00:39.570 回答
0

利用：

position: relative

如果这仍然不起作用，您可能还需要添加：

display: block;

“位置：固定”意味着无论它保持在 ax 和 y 坐标。

于 2013-08-18T01:02:36.423 回答
0

你可以试试这个

div#grayinnerbackground {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    width: 50px;
    background-color: #D9D9D9;
    height: 100%;
}

http://jsfiddle.net/g49Mb/

更多关于这里的工作：http: //codepen.io/shshaw/full/gEiDt

于 2013-08-18T01:03:54.087 回答