Question

我希望问题很清楚。

我有DOM的主体（应该是任何高度，想到驻留窗口的用户）并且我想要（在垂直方向上）一个元素（可以包含其他子元素，但这并不意味着）。

有可能吗？也许用桌子？我想避免Js ......

Answer 1

你需要一个合适的标记。像这样的东西

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

Live Example （查看我对this问题的回答）

还有另一种方式

<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元素进行avioded。

<强> Live Example

Answer 2

这是我使用的一种棘手的方法。注意，包装器给出高度和包装器＆gt; 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>

由于车身高度，是否可以垂直居中一个元素（跨度，div，等等）？

2 个答案: