Question

以下html创建的网页<html>身高= 8，<body>身高= 0，而div的身份为＆＃34;居中＆＃34;在屏幕上也垂直居中。那怎么样？

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div style=" height:100px; width:200px;  margin: auto;  position: absolute;  top: 0; left: 0; bottom: 0; right: 0;">
        Centered
    </div>
</body>
</html>

Answer 1

因为它relative到window。如果将position: relative;添加到父元素（例如body元素），则除非高度跨越窗口高度，否则它不会在屏幕上垂直居中。

Answer 2

当您使用position:absolute;时，元素将其相对于具有已定义位置属性的最近祖先的位置，在这种情况下是该窗口。这意味着您在父元素中定义的任何高度对于此元素的定位都是完全冗余的。相对于窗口，它的位置正好在您想要的位置。

如果您不想要这种行为，请尝试查看this website以确定要使用的位置，并尝试向父元素添加位置属性。

Answer 3

body height为零，因为内部唯一的div是绝对的，并且不会导致body高度增长。

正文有默认8px margin，这会导致html增长8px height。

绝对div是相对于身体的。并且left，right，top，bottom值强制div以与边相等的距离居中

div以屏幕为中心，但出于和

3 个答案: