Question

我有一个水平居中但相当短的网页 - 它只占垂直页面的一半。我希望它集中在一起。如何垂直居中标签？我不能有静态高度，所以这不是一个选择。如果CSS不够强大，我可以用Javascript来完成这个吗？谢谢！

Answer 1

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

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

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

我经常这样设置高度：50％和填充顶部：25％但这并不总是合适。

此页面标识了可能有效的其他技术：

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

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

3 个答案: