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 に答える