Question

我有这个

<body>
<div>
  <div class="wrapper">
     <div class="wrapper-content">
     </div>

     <footer>
     </footer>
  </div>
</div>
<body>

我想将包装内容垂直放在中间，页脚总是固定在页面底部？

Answer 1

你可以试试这个： -

.wrapper {
height: 200px;
width: 500px;
}

.wrapper-content {
position: relative;
top: 50%;
}

.footer {
position: absolute;
bottom: 0px;
}

Answer 2

如上所述，你需要使用css来做到这一点。在你的css文件中，为包装器创建一个新的ID选择器，为页脚1创建另一个：<div id="wrapper">，并在css文件中添加以下代码：

#wrapper{
margin-left:auto;
margin-right:auto;
width:400px;
}

为页脚，在css中添加另一个ID：

#footer{
position:absolute;
bottom:0;
width:100%;
height:50px;   /* Height of the footer */
}

希望有所帮助：）

Answer 3

如果#wrapper-content的高度是固定的，那么你很幸运：

#wrapper-content
{
    position: relative;
    height: 400px;
    top: 50%;
    margin-top: -200px; /* minus 1/2 times the height */
}

如果高度可能不同，您可以使用display: table-cell

垂直居中其内容

#wrapper
{
    display: table;
}

#wrapper-content
{
    display: table-cell;
    vertical-align: middle;
}

对于页脚，请使用绝对或固定定位：

footer
{
    position: absolute; /* or fixed */
    width: 100%;
    left: 0;
    bottom: 0;
}