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

Question

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

Answer 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 ;}

Answer 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 style的包装器。

table-cell属性仅适用于具有display：table property

的包装器