Javascript 如何垂直对齐HTML文档的body标记？

我有一个水平居中但相当短的网页，它只占垂直页面的一半。我想让它居中。如何使标记垂直居中？我不能有一个静态高度，所以这不是一个选项。如果CSS不够强大，我可以使用Javascript来实现这一点吗？谢谢

我经常这样做，设置高度：50%，填充顶部：25%，但这并不总是合适的

本页确定了一种可能有效的不同技术：

---

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

1） 如果你的内容确实是一个固定的已知高度，那么你可以用CSS定位它

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

---

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

html:

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

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

---

如果您确实关心语义标记，并且必须支持较旧的浏览器，那么您将不得不求助于JavaScript。以下是一个解决方案：

---

关键是：

先试试。我确实关心语义标记……我觉得我必须使用类似JS的东西。如何使用javascript实现这一点？@alecwhardy:我已经更新了答案，加入了一个用于语义标记的javascript解决方案。

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

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