Question

我正在尝试获得如下的页面布局 Horizontally and vertically center div in the middle of page with header and footer stuck to top and bottom of page

除了ie6和ie7之外，这在所有浏览器中都很有用。

任何人都可以帮我解决这个问题吗？我是服务器端开发人员，也是前端新手。我做了一些搜索，但找不到解决方案。

先谢谢你的帮助。

Answer 1

使用CSS垂直居中可能会很痛苦。查看Dead Centre。它需要一个额外的容器“地平线”才能知道垂直中心的位置，不幸的是，你必须知道你想要居中的内容的尺寸，以便你可以抵消它。

这样的事情......

body {
  margin: 0px
}

#horizon {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  height: 1px;
  overflow: visible;
  visibility: visible;
  display: block
}

#content {
  margin-left: -125px;
  position: absolute;
  top: -35px;
  left: 50%;
  width: 250px;
  height: 70px;
  visibility: visible
}

<body>
     <div id="horizon">
          <div id="content">
               content you want centered
          </div>
     </div>
</body>

Answer 2

.centered {
  background-color: red;
  width:50px;
  height:50px;
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

<div class="centered">

Answer 3

这在Chrome 38上不再有效。尝试在上方加载死点网站并调整浏览器大小 - 请参阅文本中的失真。

在页面中间水平和垂直居中div

3 个答案: