Question

我正在尝试将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的底端。

我做错了什么？

Answer 1

尝试将此添加到CSS中，我认为它可以按您的需要运行：

div.loginContent {
    position:absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Answer 2

当我看到你正在使用固定高度时，为什么不简单地添加正确的边距大小以使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/

为什么我的div在中间垂直/水平对齐？

2 个答案: