html - 具有垂直滑动内容的中心 div

Question

我正在制作一些带有垂直滑动内容的页面。这很好用，但是我不能垂直居中我的内容 div。

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

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

Answer 1

概念

使用Centering In The Unknown CSS hack将未知大小的容器垂直居中；将适当的规则应用于.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;
}

演示

• 在 jsFiddle 上

参考

• Chris Coyier以未知为中心