html - 垂直方向のスライド コンテンツを含む中央の div

Question

縦スライド コンテンツを含むページを作成しています。これはうまく機能しますが、コンテンツ div を垂直方向に中央揃えできません。

私のフィドルを参照してください: http://jsfiddle.net/39kfL/1/

.contentトップからフッターコンテンツの先頭まで、クラスを垂直方向に中央揃えする必要があります。

Answer 1

概念

Centering In The Unknown 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;
}

デモ

• jsFiddle について

参照

• Chris Coyier 著「未知の中心」