-2

我有这个

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

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

我想让 wrapper-content 垂直居中，而页脚总是固定在页面底部？

4

3 回答 3

1

如果#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;
}
于 2013-11-04T09:10:43.467 回答
1

如上所述，您需要使用 css 来执行此操作。在您的 css 文件中，为包装器创建一个新的 ID 选择器，为页脚创建一个新的 ID 选择器：<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 */
}

希望能帮助到你 ：）

于 2013-11-04T08:58:08.563 回答
1

你可以试试这个： -

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

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

.footer {
position: absolute;
bottom: 0px;
}
于 2013-11-04T08:56:12.603 回答