水平和垂直居中在页面中间的div [英] Horizontally and vertically center div in the middle of page
问题描述
我想获得如下的页面布局
水平和垂直中心div在页面中间，页眉和页脚卡在页面顶部和底部
I am trying to get a page layout like the following Horizontally and vertically center div in the middle of page with header and footer stuck to top and bottom of page
这在所有浏览器中都很出色，除了ie6和ie7。
This works great in all browsers except ie6 and ie7.
任何人都能帮我解决这个问题吗？我是一个服务器端开发人员和新的前端。我做了一些搜索，但找不到解决方案。
Can any one help me how to fix this? I am a server side developer and new to front end. I did some searching but could not found the solution.
感谢您提前帮助。
推荐答案
使用CSS进行垂直居中可能会很痛苦。请查看死中心。它需要一个额外的容器地平线来知道垂直中心的位置，不幸的是，你必须知道你想要居中的内容的尺寸，以便可以抵消它。
Centering vertically with CSS can be a pain. Check out Dead Centre. It requires an extra container 'horizon' to know where the vertical center is, and unfortunately you must know the dimensions of the content you want centered so that you can offset it.
类似这样...
HTML ：
<body>
<div id="horizon">
<div id="content">
content you want centered
</div>
</div>
</body>
CSS：
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
}
这篇关于水平和垂直居中在页面中间的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
