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

Question

我已放置3 div。第一个父亲有css个相对位置，它占据视口的全宽。第二个孩子有绝对的地位覆盖父母的所有区域。第3个孩子也有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

你可以尝试解决它，如下所示。对于要垂直居中的元素，需要知道高度。我还将第3个子项更改为内联块，并使用变换将其水平居中。如果您只需要垂直居中，则可以移除left: 50%并将translate更改为translateY。

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

*{
 margin: 0px;      /* Added */
 padding: 0px;     /* Added */

}

.slide-block {
  align-items: center;  /* Added */
  }

.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: 0px;
  padding:0px;
  position: absolute;
  top: 50%;
  left:50%;  /* Added */
  transform: translate(0,-50%);
  -moz-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
}

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

Answer 3

尝试将justify-content: center添加到.slide-block .slide-block-content。希望这会奏效。

.slide-block .slide-block-content {
justify-content: center
}