1

質問は明確です。

私はDOMの本体（ウィンドウに常駐するユーザーを考えて、任意の高さである必要があります）を持っており、要素（他の子を含めることができますが、これは意味しません）を（垂直方向に）中央に配置したいと思います。

出来ますか？たぶんテーブルを使用していますか？私はJsを避けたい...

4

2 に答える 2

4

適切なマークアップが必要です。このようなもの

<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
    <div style='display : table; width : 100%; height : 100%'>
    <div style='display : table-row;'>
        <div style="border:solid; display : table-cell; vertical-align : middle">
            Hello
        </div>
    </div>
    </div>
</body>
</html>

実際の例(この質問に対する私の回答を確認してください)

別の方法もあります

<html>
    <body style='width : 100%; height : 100%'>
        <div style='position : absolute; width : 50px; height : 50px; margin : -25px 0px 0px 0px; top : 50%; border : 1px solid #000'>
        </div>
    </body>
</html>

ここでは、前の方法で見られた余分な div 要素を回避できます。

実際の例

于 2012-06-21T12:34:40.180 に答える
2

それは私が使ったトリッキーな方法です。wrapper は高さを与え、wrapper > div は幅を与えることに注意してください。

それはIEでは動作しないはずです...

<html>
<head>
    <style>
    html, body {
         height: 100%; width: 100%; margin: 0; display: table;
         vertical-align: middle
    }
    #wrapper {
         display: table-cell;
         height: 100px;
         vertical-align: middle;
         width: 100%;
    }
    #wrapper > div {
          width: 50%; margin: auto;
          border: 1px solid red
    }
</style>
</head>
<body>

<div id="wrapper">
    <div class="content">
        content there...
    </div>
</div>
</body>
</html>
于 2012-06-21T12:55:53.930 に答える