0

我想用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>
4

2 回答 2

4

弄乱 html 和 body 使其显示不是一个好主意：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>
于 2013-02-08T15:04:57.087 回答
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 演示。

于 2013-02-08T15:05:15.967 回答