CSS - 絶対位置のIEで中心位置が機能しない

Question

3を配置しましたdiv最初の親はcssのような位置関係にあり、ビューポートの全幅を取っています。 2番目の子供は、親のすべての領域をカバーする絶対的な位置を持っています。 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に変更してください。

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

Answer 2

にjustify-content: centerを追加してみてください。これがうまくいくと思っています。

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

Answer 3

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