Question

我想以下面的方式绝对一个div，但由于某种原因，firefox将div推到最顶端，所以它是水平居中，但垂直方向是顶部。 Chrome工作正常

HTML：

<body>
<div id="login">
            <div id="header">ict <span class="redText">recruit</span></div>
            <div id="wrapper">

                    <div class="page-header">
                        <h1>Login</h1>
                    </div>
                    <div id="loginBox">
                        <div class="control-group" id="Div1">

                            <div class="controls">
                                <label class="control-label" for="firstName1">Password</label>
                            </div>
                        </div>
                        <div class="control-group" id="firstName1g">
                            <label class="control-label" for="firstName1">Password</label>                
                        </div>
                    </div>
            </div>
</div>
</body>

CSS：

#login{
    position: relative;

    text-align:center;
    width: 100%;
    height: 100%;
    display: block;
}
#header {
    position:relative;
    text-align: left;
    padding-left: 50px;
    width: 100%;
    height: 50px;
    border-bottom: 3px solid #dc0000;
    font-family: Leelawadee, sans-serif;
    font-size: 30px;
    line-height: 50px;
}
.redText {
    color: rgb(220,0,0);
}
#wrapper {
    margin: 0 auto;
    position: relative;
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;
    text-align: left;
}
div.page-header h1 {
    font-family: Leelawadee, sans-serif;
    font-weight: 300;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 3px solid #dc0000;
}
#loginBox {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 30px;
    background: #e5e5e5;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;

}

Answer 1

摆脱包装上的负边距。将位置设置为绝对值。调整左上角和左上角。

jsfiddle

的 CSS 的

#wrapper { margin: 0 auto; position: absolute; width: 400px; height: 400px; top: 50%; left: 30%; text-align: left;

}

Answer 2

作为一般规则，使用负边距是个坏主意......特别是当它们影响DOM中的主要结构元素时。我建议你采用一种不同的方法来集中#wrapper div，就像我在这个小提琴中所做的那样http://jsfiddle.net/Uwsxu/2/

简而言之，删除您的负边距以及left:50%和top:50%

#wrapper {
    margin: 0 auto;
    position: relative;
    width: 400px;
    height: 400px;
    text-align: left;
}

Answer 3

像Morpheus所说的那样：你在包装上没有绝对的位置。

如果您想使用此方法：

    margin: 0 auto;
    position: relative;
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;

然后该位置应该是绝对的或固定的，而不是相对的。

所以我建议使用以下内容来包装包装器：

#wrapper {
    margin: 0 auto;
    position: relative;
    width: 400px;
    height: 400px;
    top: 150px; (+ the 50px for the header, since it is relative to the header as well)
    text-align: left;
}

绝对定心在FF中不起作用

3 个答案: