平铺在

页

中间垂直居中的div我试图让一个页面布局类似下面的 Horizontally and vertically center div in the middle of page with header and footer stuck to top and bottom of page 平铺在

这除了IE6和IE7在所有浏览器的伟大工程。

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

感谢您提前帮忙。

来源

2011-12-30 Bachi

你可以发布一些代码吗？ – MCSI 2011-12-30 13:17:40

'display：table-cell;'在IE7及其以下版本中不起作用，它在你连接的SO问题的答案中被用来垂直对齐div – 2011-12-30 13:19:59

代码会有帮助吗？ – Robert 2011-12-30 14:09:46

用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>

来源

2011-12-30 14:50:51

欢迎来到stackoverflow特德，并感谢您的答案。 – 2011-12-30 15:02:07

嗨，感谢您的回复。这里是在上面的帖子中提到的代码 http://jsfiddle.net/UYpnC/5/ 我已经看过死中心，所以如果有页眉和页脚居中的div超过页眉和页脚，因为绝对的位置。这里的表格单元格我不能使用，因为它不支持像ie 7/6这样的旧版浏览器。谢谢， – Bachi 2011-12-30 15:21:18

嗨巴切，正如其他人所说，支持'display：table-cell'是不稳定的。如果你使用上面的Dead Center方法，结合'position：fixed'为页眉和页脚（'top'为页眉，'bottom'为页脚'），那么这样做会起作用吗？ – 2012-01-03 20:16:47

此不再起作用以及在Chrome 38尝试加载死点位置上方，并调整浏览器 - 看到失真文本。

来源

2014-10-14 18:06:02 robotrobot

回答

相关问题