0

我试图在一个 div 中对齐一个 div，以便它完全位于中间，但我无法让它工作，我已经尝试了很多东西。这是我现在的代码：

HTML

<div class="loginContainer">
  <div class="loginContent">
    This div should be in the middle of the outer div
  </div>
</div>

CSS

div.loginContainer {
    width:100%;
    height:300px;
    position:absolute;
    top:50%;
    margin-top:-150px;

    background-color:#ffffff;
    background: url('bg.jpeg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    background-size: cover;
}

div.loginContent {
    margin:0 auto;
    height:250px;
    width:300px;
    padding:10px;
    position:relative; 
    top:-50%; 

    background-color:#ffffff;
    border-radius:20px 20px 20px 20px;
        -moz-border-radius:20px 20px 20px 20px;
        -webkit-border-radius:20px 20px 20px 20px;
        -khtml-border-radius:20px 20px 20px 20px;
    box-shadow:7px -5px 10px rgba(230, 230, 250, 0.7);
        -webkit-box-shadow:7px -5px 10px rgba(230, 230, 250, 0.7);
        -moz-box-shadow:7px -5px 10px rgba(230, 230, 250, 0.7);
    box-shadow:5px 5px 30px 0px rgba(202, 225, 255, 1), inset 5px 5px 50px 2px rgba(230, 230, 250, 1);
        -webkit-box-shadow:5px 5px 30px 0px rgba(202, 225, 255, 1), inset 5px 5px 50px 2px rgba(230, 230, 250, 1);
        -moz-box-shadow:5px 5px 30px 0px rgba(202, 225, 255, 1), inset 5px 5px 50px 2px rgba(230, 230, 250, 1);
}

我能得到的最接近的是它水平对齐并且几乎垂直，但它仍然更靠近外部 div 的底端。

我做错了什么？

4

2 回答 2

0

尝试将此添加到您的 CSS 中，我认为它会按您的意愿工作：

div.loginContent {
    position:absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
于 2013-01-14T10:55:50.987 回答
0

正如我所见，您正在使用固定高度，为什么不简单地添加正确的边距大小以使 div 居中？

div.loginContent {
    margin:15px auto;
}

http://jsfiddle.net/kSUbe/

或者，如果您可以对容器执行相同的操作。如果您有top:50%内容 div 将从容器的中间开始，但是如果您希望它居中，则必须将其向上移动一半大小。

div.loginContent {
    margin:-135px auto 0 auto;
    top:50%;
}

http://jsfiddle.net/kSUbe/1/

于 2013-01-14T10:59:44.130 回答