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

Answer 1

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
}

     

          

               content you want centered