html - 如何使包装器<div>垂直居中并响应？

我希望包装器的滚动部分中的图像浮在屏幕中间（宽），如果屏幕尺寸改变，则放大/缩小。目前，它位于页眉下方，但位于页脚上方。如何使它垂直居中？

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 -->

在此先感谢大家！

最佳答案

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

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

较新的浏览器很好地支持display: table{-cell}属性，因此应该可以解决问题。

关于html - 如何使包装器<div>垂直居中并响应？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21118462/