水平居中浮动div答案

【问题标题】：center floating div horizontally水平居中浮动div
【发布时间】：2012-02-03 15:05:28
【问题描述】：

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

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

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

margin: 0 auto 也无济于事（大概是因为它不能与 position: fixed 一起使用？

我并不真正关心解决方案的工作原理，因此 javascript 或一些 html5 技巧与纯 css 一样好。我已经尝试过找到here from starx 的解决方案，但这似乎也不适用于位置：固定。还有 this 也不起作用（即它是居中的 - 不确定许多 <input class="guiButton" type="image" src="/icons/some.png" /> 是否根据他的定义具有固定大小。）

【问题讨论】：

标签： javascript css html

【解决方案1】：

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/

【讨论】：

【解决方案2】：

如果您的元素是固定宽度（例如 width: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 指出问题仅与水平定位有关。

【讨论】：

@Xander 啊！非常正确！我似乎超越了自己……编辑：已修复。感谢您指出这一点:)
谢谢，我通常离客户端很远，所以我敢肯定这是一个非常愚蠢的问题，我边走边学。
@Voo 不，这根本不是一个愚蠢的问题。这是一个很好的问题。很高兴我能帮助你。 :)

【解决方案3】：

我做了一个小例子：

<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>

希望对你有帮助！

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

您只需将元素分层：

  z-index: 9999;

这将保证您将框保持在顶部（z 轴），然后您只需将其放置在您想要 x/y 轴的任何位置

参考：Adding z-index MDN

【讨论】：

我已经使用 z-indizes 来确保点击/触摸事件到达正确的元素，但我不明白这如何帮助我将浮动 div 居中？
你为你的 div 定义一个宽度/高度，现在你没有尺寸（至少从你的例子来看）
通过在下面使用我的 javascript，您的 div 或窗口的大小无关紧要。它可以用于固定布局和流体布局，因为 javascript 在加载后会查找窗口/div 的大小。