CSS - 中心位置不在IE中有绝对位置

我已经放置了3 div。有位置相对的css的第一个父母，它正在取全宽的视口。第二个孩子拥有覆盖父母所有区域的绝对位置。第三个孩子也有绝对的位置与margin: 0 auto。CSS - 中心位置不在IE中有绝对位置

.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。

来源

2017-07-26 Sharjil Khan

它没有出现在中心'chrome'和'mozilla'无论是。 –

你可以尝试去解决它像下面。要使元素垂直居中，需要知道高度。我还将第三个孩子更改为嵌入块，并使用变换将其水平居中。如果您只需要垂直居中，则可以删除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>

来源

2017-07-26 07:52:26 Patrick2607

为什么'内联块'？ 'block'元素将工作相同。 –

谢谢，我得到了解决方案。它非常接近，我无法弄清楚。 –

-1

尝试通过将justify-content: center添加到您的.slide-block .slide-block-content。希望这会起作用。

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

来源

2017-07-26 07:39:44 sudhanshum

*{ 
 
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>

来源

2017-07-26 07:47:24

CSS - 中心位置不在IE中有绝对位置

回答

相关问题