Horizontally and vertically center div in the middle of page
Question
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
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.
Thanks for you help in advance.
3 answers
solution1
5 2011-12-30 14:50:51
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.
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>
solution2
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">
solution3
0 2014-10-14 18:06:02
这在Chrome 38上不再能正常工作。尝试在上方加载死点网站并调整浏览器的大小-请查看文字中的变形。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.