您如何垂直对齐HTML文档的body标签？

Question

我有一个水平居中但相对较短的网页-它只占垂直页面的一半。 我希望它居中。 如何将标签垂直居中？ 我不能有一个固定的身高，所以这不是一个选择。 如果CSS不够强大，我可以使用Javascript完成此工作吗？ 谢谢！

Answer 1

两种主要方法，都不是特别完美，但被广泛使用：

1）如果您的内容确实是一个已知的固定高度，则可以使用

position: absolute;
top: 50%;
margin-top: here, set a pixel value that's equal to: -1 * (content height / 2)

2）如果您不在乎它在IE7及更低版本中的工作方式是否相同，请按如下所示设置CSS：

html { display: table; }
body { display: table-cell; vertical-align: middle; }

Answer 2

如果您不介意添加非语义标记，则可以执行以下操作：

HTML：

<div class="pusher"></div>
<div class="center"></div>

CSS：

html, body {
    height: 100%;
}
.pusher {
    height: 100%;
    margin-bottom: -50%;
}
.center {
    background: green;
    width: 400px;
    height: 200px;
    margin: 0 auto;
}

http://jsfiddle.net/Jsqqk/

---

如果您确实关心语义标记，并且必须支持较旧的浏览器，那么您将不得不使用JavaScript。 这是使用jQuery的一种解决方案：

var $window = $(window),
    $container = $('#container');

$window.resize(function(){
    $container.css('margin-top',
        Math.max(($window.height() / 2) - ($container.height() / 2), 0)
    );
}).resize();

这是小提琴： http : //jsfiddle.net/dw3rc/

Answer 3

我经常通过设置height：50％和padding-top：25％来做到这一点，但这并不总是合适的。

此页面标识了可能有效的另一种技术：

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html