中心div与垂直滑动内容

Question

我正在制作一些包含Vertical Sliding Content的页面。这很好用但是，我无法将Verticaly放在我的内容div中。

看我的小提琴：http://jsfiddle.net/39kfL/1/

我需要将.content类从TOP垂直居中到页脚内容的开头。

Answer 1

观

使用居中在未知CSS黑客中垂直居中具有未知大小的容器;将适当的规则应用于.item和.container标注元素，以使包含的元素在其父元素中居中。

为了成功完成此操作，您还必须补偿页脚的偏移量，并将底部边距设置为.content。另外，丢失同一元素的top: 17px声明，因为它似乎没有用处。

代码实施

.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;
}

演示

• On jsFiddle

参考

• Centering in the Unknown by Chris Coyier