在页面中间水平和垂直居中div
[英]Horizontally and vertically center div in the middle of page
问题描述
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 
我正在尝试在页面中间获得如下所示的页面布局，其中水平和垂直居中div的页眉和页脚固定在页面的顶部和底部
This works great in all browsers except ie6 and ie7. 这在除ie6和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. 我做了一些搜索，但是找不到解决方案。
Thanks for you help in advance. 感谢您的帮助。
3 个解决方案
解决方案1
5 2011-12-30 14:50:51
Centering vertically with CSS can be a pain. 使用CSS垂直居中可能会很痛苦。 Check out Dead Centre . 看看Dead Center 。 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. 它需要一个额外的容器“水平”来知道垂直中心在哪里，不幸的是，您必须知道要居中的内容的尺寸，以便可以偏移它。
Goes something like this... 像这样...
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>
解决方案2
1
.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">
解决方案3
0 2014-10-14 18:06:02
这在Chrome 38上不再能正常工作。尝试在上方加载死点网站并调整浏览器的大小-请查看文字中的变形。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.