Horizontally and vertically center div in the middle of page

前端未结

关注

 3  659

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

相关标签:

3条回答

慢半拍i

2020-12-20 01:05

This no longer works well on Chrome 38. Try loading the dead center site above and resizing the browser - see the distortion in the text.

0 讨论(0)
发布评论:

提交评论
- 加载中...

甜味超标

2020-12-20 01:12

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>

0 讨论(0)

傲寒

2020-12-20 01:25

.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">

0 讨论(0)