Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
830 views
in Technique[技术] by (71.8m points)

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

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...