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中有絕對位置

回答

相關問題