html - CSS - 中心位置在具有绝对位置的 IE 中不起作用

Question

我放置了 3 个 div。第一个具有 css 的父级相对位置，它占据了整个视口(viewport)宽度。第二个 child 拥有覆盖 parent 所有区域的绝对位置。第三个 child 也有 margin: 0 auto 的绝对位置。

.slide-block {
  position: relative;
}

.slide-block .slide-block-center-wrapper {
  top: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.slide-block .slide-block-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 30px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  left: 0;
  right: 0;
}

<div class="slide-block">
  <div class="slide-block-center-wrapper">
    <div class="slide-block-content">
      ...some slide caption content
    </div>
  </div>
</div>

问题是，.slide-block-content 没有出现在 IE 浏览器的中心。它出现在 chrome 和 mozilla 的中心。

Answer 1

您可以尝试如下解决。对于要垂直居中的元素，需要知道高度。我还将第三个 child 更改为内联 block ，并使用转换将其水平居中。如果只需要垂直居中，可以去掉left: 50%，将translate改为translateY。

.slide-block {
  position: relative;
  width: 100%;
  height: 200px;
  background: deepskyblue;
}

.slide-block .slide-block-center-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.slide-block .slide-block-content {
  display: inline-block;
  max-width: 1180px;
  padding: 0 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  -moz-transform: translate(-50%);
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
}

<div class="slide-block">
  <div class="slide-block-center-wrapper">
    <div class="slide-block-content">
      ...some slide caption content
    </div>
  </div>
</div>