我怎么做我的包裝紙 <div> 垂直居中並反應靈敏？

Question

我希望包裝器的滾動部分內的圖像浮在屏幕中間（寬），並在屏幕改變大小時放大/縮小。 當前，它位於頁眉下方，但位於頁腳上方。 如何使它垂直居中？

CSS：

/* main content
------------------------------------------------------------------- */  

#wrapper {
   float:left;
   margin:110px 0 0 0;
   padding:0 0 0 250px;
   background:#fff;
   position:relative;
   z-index:2;
   border-bottom:solid 20px #fff;
}   
.post {
    padding:0 5px 0 0;
    background:#fff;
    height:100%;
    }
#wrapper img {
 color:#fff;
 width:auto;
 }

HTML：

<!-- section that contains all pics -->
<section id="wrapper">
    <article class="post">
    <p><img src="img/scroll/001_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
    </article>

    <article class="post">
    <p><img src="img/scroll/002_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
    </article>

    <article class="post">
    <p><img src="img/scroll/003_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
    </article>

    <article class="post">
    <p><img src="img/scroll/004_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
    </article>

    <article class="post">
    <p><img src="img/scroll/005_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
    </article>

</section>
<!-- close section -->

在此先感謝大家！

Answer 1

如果要使用CSS表，我建議：

.post {
    display: table;
}
.post p {
    display: table-cell;
    vertical-align: middle;
    height: inherit; /* may not be needed */
}

較新的瀏覽器很好地支持display: table{-cell}屬性，因此可以解決這個問題。

Answer 2

我想到了一些如何垂直放置div居中的解決方案。

#wrapper {
 float:left; /**REMOVE THIS**/
 margin:110px 0 0 0; /** REMOVE THIS **/
 padding:0 0 0 250px; /** REMOVE THIS **/
 width: 100%; /** ADD THIS **/
 height: 100% /** ADD THIS **/
 background:#fff;
 position:relative; /** REMOVE THIS **/
 z-index:2;  /** REMOVE THIS **/
 border-bottom:solid 20px #fff; /** REMOVE THIS **/
}

#wrapper {
 width: 100%; 
 height: 100%;
 min-height: 100%;
 background:#fff;
 position: absolute;
}   
.post {
  padding:0 5px 0 0;
  background:#fff;
  height:100%;
  }
 #wrapper img {
  color:#fff;
  width:auto;
 }
#content {
  position: relative;
  width: 60%;
  height: 60%;
  top: 50%;
  left: 50%;
}

HTML

<section id="wrapper">
  <div id="content"> <!-- ADD THIS This will be used to position vertically-->
  <article class="post">
<p><img src="img/scroll/001_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
</article>

<article class="post">
<p><img src="img/scroll/002_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
</article>

<article class="post">
<p><img src="img/scroll/003_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
</article>

<article class="post">
<p><img src="img/scroll/004_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
</article>

<article class="post">
<p><img src="img/scroll/005_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
</article>

需要添加更多內容以使它更好，但這將使您朝正確的方向開始。 http://jsfiddle.net/cornelas/qCa3J/