在页眉和页脚之间垂直居中内容

【问题标题】：Vertically center content between header and footer在页眉和页脚之间垂直居中内容
【发布时间】：2013-07-03 10:22:40
【问题描述】：

我想知道是否有人可以帮助我。我有一个带有页眉、页脚和内容容器的网站。现在我希望在页眉和页脚容器而不是页面之间垂直居中内容。有没有人知道如何实现这一目标？？？

【问题讨论】：

请编码...或小提琴:)

【解决方案1】：

试试下面的css

        <div >header</div>
        <div class="container">
               <p>This small paragraph...</p>
        </div>
        <div >footer</div>

CSS：

           div.container {
                min-height: 10em;
                display: table-cell;
                vertical-align: middle ;}

【讨论】：

【解决方案2】：

试试下面的css

        <div class="wrapper">
           <div >header</div>
           <div class="container">
               <p>This small paragraph...</p>
           </div>
           <div >footer</div>
       </div>

CSS：

        .wrapper{ display: table; }

        div.container {
            min-height: 10em;
            display: table-cell;
            vertical-align: middle ;
        }

试试这个，我刚刚添加了带有 display:table 样式的包装器。

table-cell 属性仅适用于具有 display:table 属性的包装器

【讨论】：