显示屏内的绝对定位：表格单元格

Question

在IE11中，第二张图片没有正确居中垂直，而是位于div的顶部。

＆＃13;

＆＃13;

#sliderContainer #mask {
  display: block;
  width: 100%;
  overflow-x: scroll;
}

#sliderContainer content {
  position: relative;
  display: table;
  height: auto;
  width: 200%;
}

#sliderContainer content>div {
  display: table-cell;
  position: relative;
  width: 50%;
  height: auto;
  vertical-align: top;
  padding: 10px 20px;
  background-color: #54314e;
}

#sliderContainer content>div:last-child {
  background-color: #9F4585;
}

.vertical-float {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

＆＃13;

<div id="sliderContainer" *ngIf="activeCircle > 0">
  <div id="mask">
    <content>
      <div>
        <div class="col-xs-4">
          <img src="http://placehold.it/350x150/ffffff/000000" />
        </div>
      </div>
      <!--
        -->
      <div>
        <div class="vertical-float">
          <img src="http://placehold.it/350x50/ffffff/000000" />
        </div>
      </div>
    </content>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

为什么会这样？就好像它不知道如何计算相对于其包含div的高度的顶部位置。

Answer 1

非常奇怪，通过删除包含div元素的相对位置来解决这个问题。在这种情况下，它在#sliderContainer content > div上。

#sliderContainer #mask {
  display: block;
  width: 100%;
  overflow-x: scroll;
}

#sliderContainer content {
  position: relative;
  display: table;
  height: auto;
  width: 200%;
}

#sliderContainer content>div {
  display: table-cell;
  /*position: relative;*/
  width: 50%;
  height: auto;
  vertical-align: top;
  padding: 10px 20px;
  background-color: #54314e;
}

#sliderContainer content>div:last-child {
  background-color: #9F4585;
}

.vertical-float {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<div id="sliderContainer" *ngIf="activeCircle > 0">
  <div id="mask">
    <content>
      <div>
        <div class="col-xs-4">
          <img src="http://placehold.it/350x150/ffffff/000000" />
        </div>
      </div>
      <!--
        -->
      <div>
        <div class="vertical-float">
          <img src="http://placehold.it/350x50/ffffff/000000" />
        </div>
      </div>
    </content>
  </div>
</div>

Answer 2

第二个img没有居中，因为你已经使用了“vertical-float”作为图像。 “vertical-float”div是绝对位置。所以要将这个“vertical-float”div居中，写下css：

.vertical-float {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -175px;
    margin-top:-25px;
}

margin-left :( div width）/ 2 px; margin-top :( div height）/ 2 px;