Question

我有一个搜索网站，需要将索引页面中垂直和水平居中的搜索栏和徽标作为页面上的唯一项目。

实施此

的最佳和最有效的方法是什么？

Answer 1

这是一个简单的方法，虽然它不适用于IE6，它不支持position：fixed。如果您需要IE6支持，请使用position：absolute，但请确保页面内容不长于视口的高度。

#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像素的填充。

Answer 2

<style>
div.center {
  position: fixed;
  width: 320px;
  height: 240px;
  top: 50%;
  left: 50%;
  margin-top: -120px;
  margin-left: -160px;
}
</style>

<div class="center"><!-- search bar --></div>

但我不知道这是否是最好的方式

Answer 3

对于css-only方法检查这个小提琴。 http://jsfiddle.net/jeffrod/nFthS/

它要求中心盒的宽度和高度是已知的。它将盒子的左上方放在中间，然后使用边距将其移回，使盒子的中心位于页面的中心。

如何在谷歌浏览器视口中间居中div

3 个答案: