Question

我正在尝试将我的<div>元素与页面中心对齐。

我使用以下代码，如果<div class='box'>的高度小于600px，如果高度增加到1000px，那么它会延伸到页面的顶部和底部。

代码：

<html>
    <head>
    </head>
    <body>
        <div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div>
    </body>
</html>


<style>
    .box{
        height:600px;
        width:960px;
        margin:auto;
        border:1px solid #000;
        position:absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
    }
    .div1{
        height:100px;
        width:100%;
        background:red;
        position:relative;
        top:0;

    }
    .div2{
        height:100px;
        width:100%;
        background:red;
        position:relative;
        margin-top:60px;

    }
    .div3{
        height:100px;
        width:100%;
        background:red;
        position:absolute;
        bottom:0;

    }
    </style>

我已将以下JSFiddle放在一起，但它似乎并不反映我的浏览器显示的内容。我的浏览器在600px的视口处显示div，如下所示：

_ _ _ _ _ _ _ _ _ _ _ _ 
|                      |
|                      |
|          _           |
|      {  Box  }       |
|          -           |
|                      |  < Browser window
- - - - - - - - - - - -

如果`的高度增加到1000px，则会产生以下结果：

_ _ _ _ _ _ _ _ _ _ _ _ 
|          -           |
|                      |
|                      |
|      {  Box  }       |
|                      |
|          _           |  < Browser window
- - - - - - - - - - - -

应该改变什么？

Answer 1

为了将.div2保持在容器的中间，即使高度发生变化，也要添加这个CSS：

   .div2{
        height: 100px;
        width: 100%;
        background: lightblue;
        position: absolute;
        top: 50%;
        margin-top: -50px;
    }

Heres your updated Fiddle。希望有所帮助。

Answer 2

要做到这一点，请将容器放在相对位置。

然后你的盒子绝对定位。

排名靠前：50％; 添加margin-top :( - ）（框高* .5）

左转：50％; 添加左边距:( - ）（框宽* .5）

以下是代码：

.box{
        height:100vh;
        width:100vw;
        margin:auto;
        border:1px solid #000;
        position:relative;
        top:0;
        bottom:0;
        right:0;
        left:0;
    }
    .centered-object{
        height:50px;
        width:50px;
        top:50%;
        margin-top: -25px;
        position: absolute;
        left: 50%;
        margin-left: -25px;
        background:red;
        
        
    }

<div class="box">
    
<div class="centered-object"></div>

</div>

如果这对你有意义或者你需要更多解释，请告诉我。

如果您愿意，可以使用以下更新的小提琴：http://jsfiddle.net/pjj8ujqb/3/

无论你的窗户有多大，盒子总是保持中心。

Answer 3

我找到了问题的答案。我遇到的问题是当高度增加时，盒子div正在移动页面，这很容易通过添加顶部和底部边距来固定：

   .box{
        height:800px;
        width:960px;
        border:1px solid #000;
        position:absolute;
        margin : 5% auto 5% auto;
        top:0;
        bottom:0;
        left:0;
        right:0;
    }

在页面中间对齐Div？

3 个答案: