Question

我想要一个水平居中的“浮动”div，即即使用户滚动也始终位于屏幕顶部的div。

使用以下CSS，我将div完全放在左侧：

#guiBar {
margin-left: auto;
margin-right: auto;
position: fixed;
}

margin: 0 auto也没有帮助（大概是因为这不能与position: fixed一起使用？

我真的不关心解决方案是如何工作的，所以javascript或一些html5技巧会和纯css一样好。我已经尝试过找到here from starx的解决方案，但这似乎也不适用于position：fixed。还有this也不起作用（即它处于中心位置 - 根据他的定义，不确定<input class="guiButton" type="image" src="/icons/some.png" />的数量是否具有固定大小。）

Answer 1

如果您的元素是固定宽度（例如宽度：400px），您可以使用left和top属性以及margin属性：

#guiBar
{
    position:fixed;
    left:50%;
    margin-left:-200px; /*half the width*/
}

演示：http://jsfiddle.net/VtqQD/1/show
资料来源：http://jsfiddle.net/VtqQD/1

编辑：感谢Xander指出问题仅涉及水平定位。

Answer 2

HTML

<div id="subject">
    <div id="predicate">
    Read Me!
    </div> 
</div>

CSS

#subject {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

#predicate {
    position:relative;
    top:50%;
    margin:-20px auto auto auto; /*half of height*/
    width:140px;
    height:40px;
    background:#b4da55;
}

尝试http://jsfiddle.net/RfRAb/

Answer 3

您可以使用javascript使用scrollHieght和scrollWidth来查找父div的高度和宽度。然后使用这些值除以2得到div中心的值。然后用想要放在顶部的div的尺寸来抵消它。

如果你想要整个屏幕/窗口的中心使用window.innerHeight和window.innerWidth然后除以2并用你的div偏移。

Answer 4

您只需将元素分层：

  z-index: 9999;

这可以保证您将盒子保持在顶部（z轴），然后只需将它放在任何你想要的位置x / y轴

参考：Adding z-index MDN

Answer 5

我做了一个很小的例子：

<html>
<head>
    <style type="text/css">
        body { margin: 0; }
        #wrapper { width: 500px; margin: 0 auto; } 
        #top { margin: 0 auto; width: inherit; background: red; position: fixed; }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="top">
        foo
    </div>
</div>
</body>
</html>

我希望它会对你有所帮助！

中心浮动div水平

5 个答案: