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 回答