Question

我想用css在窗口中间放一个盒子，但它不起作用。例如，html元素的高度似乎不是100％。

<!DOCTYPE HTML>

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Box</title>

        <style type="text/css">
            html {
                width: 100%;
                height: 100%;
                display: table-cell;
                vertical-align: middle;
            }
            body {
                margin: auto;
                width: 300px;
                height: 300px;
                border: 1px solid black;
            }
        </style>

    </head>

    <body>
        box
    </body>
</html>

Answer 1

混淆html和身体使它显示不是一个好主意：table-cell或者什么

相反，请尝试以下代码：

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Box</title>

        <style type="text/css">
            html {
                width: 100%;
                height: 100%;
            }
            div {
                width: 300px;
                height: 300px;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -150px 0 0 -150px;
                border: 1px solid black;
            }
        </style>

    </head>

    <body>
        <div>box</div>
    </body>
</html>

Answer 2

请尝试将该框括在div元素中。调整body的大小将无效。您应该使用以下代码：

<body>
    <div id="box">box</div>
</body>

然后你的CSS应该是这样的：

#box {
    position: fixed;
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    border: 1px solid #000;
}

您可以看到jsFiddle demo here。

页面中间有一个方框？

2 个答案: