时间戳

首页 > 解决方案 > 带有粘性页脚的页面中的垂直居中 div

javascript - 带有粘性页脚的页面中的垂直居中 div

问题描述

我正在尝试垂直对齐 IE11 中的 div。我试图在这里使用@billbad 的答案

我的 axample 与 Internet 上的许多其他示例之间的区别在于它们不使用粘性页脚，我认为这就是导致我出错的原因。

HTML

<div class="wrapper">
<div class="art-header"></div>
<div class="outer-container">
    <div class="middle-container text-center">
        <div class="contner">
            <button type="button" class="btn btn-primary text-center" (click)="addLine()">Primary</button>
            <ul>
              <li *ngFor="let line of name" >
              {{ line }}
              </li>
            </ul>
        </div>
    </div>
</div>

</div>
<div class="footer">
    <div class="rmpm-footer">
    <p>Footer</p>
</div>
</div>

CSS的一部分

 .contner {
  min-height: 242px;
  max-height: 100%;
  width: 604px;
  padding-top:10px;
  background-color: #FFFFFF;
  box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1);
  padding-bottom: 12px;
  transition: max-height .4s;
  -webkit-transition: .4s;
  position: relative;
  margin-left: auto;
  margin-right: auto;

  margin-top: 40px;
}
.middle-container {
  display: table-cell;
  vertical-align: middle;

}
.outer-container {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

实际上 div 没有很好地居中并且页脚高度已调整大小。那不是我要找的。

预期的行为是当我添加行时 div 仍然居中，然后当 div 大于初始页面高度时页脚下降。

我创建了一个stackblitz 示例，您可以在那里直接检查我的代码。

标签： javascripthtmlcssangular

解决方案

尝试margin-top改用display: table-cell

.middle-container {
  margin-top: 40%;
}

推荐阅读