javascript - 如何像谷歌一样在浏览器视口(viewport)中间居中div

Question

我有一个搜索网站，需要将搜索栏和 Logo 在索引页中垂直和水平居中作为页面上的唯一元素。

实现这个的最好和最有效的方法是什么

Answer 1

这里有一个简单的方法，尽管它在不支持 position:fixed 的 IE6 中不起作用。如果您想要 IE6 支持，请使用 position:absolute，但要确保页面内容不超过视口(viewport)的高度。

#box {
    position: fixed;
    left: 0;
    top: 0;
    width:100%;
    height: 100%;
}

#box table {
    height: 100%;
}

#box td {
    vertical-align: middle;
    text-align: center;
}

和 HTML:

<div id="box"><table><tr><td>
YOUR HTML CODE HERE
</td></tr></table></div>

这就是说...

虽然你可能不应该这样做。如果您只是想要一种避免让您的内容紧贴页面顶部的外观，那么您最好在顶部简单地添加 50-100 像素的填充。