Question

I’m making some page with Vertical Sliding Content. This works well but, i can’t center verticaly my content div.

See my fiddle: http://jsfiddle.net/39kfL/1/

What i need to center the .content class vertically from TOP to the beginning of footer content.

Answer 1

Notion

Use the Centering In The Unknown CSS hack to vertically center a container with an unknown size; Apply the appropriate rules to the .item and the .container notated elements to center the contained element within its parent.

In order to pull that off successfully you would also have to compensate for the footer’s offset, and set a bottom margin to .content. In addition, lose the top: 17px declaration on the same element, as it seem to serve no purpose.

Code Implementation

.content {
    position: relative;
    margin: 0 auto 150px;
    background-color:#aaa;
}

/* ... */


.item:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

.content {
  display: inline-block;
  vertical-align: middle;
}

Demo

• On jsFiddle

Reference

• Centering in the Unknown by Chris Coyier