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

Question

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

Answer 1

试试下面的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 属性的包装器

Answer 2

试试下面的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 ;}