1

I'm trying to vertically align a div in IE11. I have tried to use the answer of @billbad here

The difference between my axample and many other examples on the internet is that they don't use a sticky footer and I think is what is causing me the error.

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>

A part of 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%;
}

Actually the div is not well centred and footer height is resized. that's not what I'm looking for.

Expected behavior is when I add lines the div still centred then footer get down when the div became bigger than initial page height.

I have created a stackblitz example you can check directly my code there.

infodev
  • 4,673
  • 17
  • 65
  • 138

1 Answers1

0

Try by using margin-topinstead display: table-cell

.middle-container {
  margin-top: 40%;
}
Abel Valdez
  • 2,368
  • 1
  • 16
  • 33
  • Without changing anything else ? – infodev May 23 '18 at 16:26
  • Yes, the problem here is that foot div is affecting the total heigt then you cando the following `center = 40% foot = 10% center = center-foot` finally you will have exactly you center in 30 or 35 it depends of the size of foot div – Abel Valdez May 23 '18 at 16:32
  • If you can provide an example that would be great – infodev May 24 '18 at 10:11