Question

我尝试了以下内容：

<body style="height: 100%;">
    <div style="display: block; height: 30rem; width: 100rem; margin: auto;">
    x
    </div>
</body>

当盒子以正确的左右边距为中心时会发生什么。但顶部和底部似乎没有利润。注意1rem等于大约10px所以顶部和底部应该有足够的空间。然而，DIV只是位于屏幕的顶部。

Answer 1

就像那样：

#yourdiv {
    position:fixed;

    height:18em;
    margin-top: -9em; 
    margin-left: -15em;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
    top: 50%;
    left: 50%;
    width:30em;
}

Answer 2

这样试过？

<body style="height: 100%; width: 100%">
    <div style="display: block; position: absolute; top: 50%; left: 50%;">
    x
    </div>
</body>

Answer 3

使用此css代替您的内联css部分

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:100em;
    height:30em;
    margin-top: -9em; 
    margin-left: -15em; 
}

例如： -

<body style="height: 100%;">
    <div id="mydiv">
    x
    </div>
</body>

仅供参考： - 职位：固定;在这里诀窍。即使你向下滚动页面，它也会让你的div保持在中心位置。希望这有帮助

Answer 4

的 Demo

我已使用%进行大小调整，完全响应，尝试更改px中的宽度和高度，仍然div仍然完全位于页面的中心。

HTML

<div class="divX">x</div>

CSS

.divX { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height: 30%; width:100%; background:red; text-align:center; }

如何创建位于浏览器屏幕中心的DIV？

4 个答案: