Internet Explorer 11でCSSがセンタリングされていない

Question

これは私を夢中にしています。それはクロムで動作し、私はそれがIEでも動作する必要があります。 https://jsfiddle.net/h18uwtsf/1/

私のhtml

<div id="q-numbers"> 
    <div>Defect Incident as of <span id="qval1"></span></div> 
    <div class="table"> 
    <div> 
     <div>Days since last escape</div> 
     <div>Best Streak 
     <br/>(since 4/5/16)</div> 
    </div> 
    <div> 
     <div class="square orange"><span id="qval2">23</span></div> 
     <div class="square blue"><span id="qval3">44</span></div> 
    </div> 
    </div> 
</div> 

私のcss

#q-numbers > div:first-child { 
    font-weight: bold; 
    font-size: 1em; 
    margin: 10px 10px; 
} 

#q-numbers .table { 
    display: table; 
    width: 100%; 
    border-spacing: 10px; 
} 

#q-numbers .table > div { 
    display: table-row; 
} 

#q-numbers .table > div > div { 
    display: table-cell; 
    width: 50%; 
    position: relative; 
} 

#q-numbers .table > div > div > div { 
    padding: 4px 0px; 
} 

#q-numbers .blue, 
#q-numbers .orange { 
    background-color: #ccc; 
    border-top: 1px solid #707376; 
    border-bottom: 1px solid #707376; 
    height: 80px; 
} 

#q-numbers .square span { 
    height: auto; 
    border-spacing: 10px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -ms-transform: translate(-50%, -50%) scale(1, 1); 
    transform: translate(-50%, -50%) scale(1, 1); 
    -webkit-transform: translate(-50%, -50%) scale(1, 1); 
    font-size: 3.5vw; 
    } 

#q-numbers .footer { 
    background-color: #eee; 
    text-align: center; 
    padding: 5px 0px; 
} 

私は上記の結果取得していますが、私のJSFiddleで見ることができますが、番号は灰色のボックスの中央になっています。 IEでは、彼らはトップの途中に現れています。

Answer 1

絶対位置を使用することは、センタリングの正しい方法ではありません。親divの代わりにCSSを使用してください。このアップデートソリューションを参照してください。

https://jsfiddle.net/h18uwtsf/2/

#q-numbers > div:first-child { 
    font-weight: bold; 
    font-size: 1em; 
    margin: 10px 10px; 
} 

#q-numbers .table { 
    display: table; 
    width: 100%; 
    border-spacing: 10px; 
} 

#q-numbers .table > div { 
    display: table-row; 
} 

#q-numbers .table > div > div { 
    display: table-cell; 
    width: 50%; 
    position: relative; 
} 

#q-numbers .table > div > div > div { 
    padding: 4px 0px; 
} 

#q-numbers .blue, 
#q-numbers .orange { 
    background-color: #ccc; 
    border-top: 1px solid #707376; 
    border-bottom: 1px solid #707376; 
    height: 80px; 
} 

#q-numbers .square span { 
    height: auto; 
    border-spacing: 10px; 
    -ms-transform: translate(-50%, -50%) scale(1, 1); 
    transform: translate(-50%, -50%) scale(1, 1); 
    -webkit-transform: translate(-50%, -50%) scale(1, 1); 
    font-size: 3.5vw; 
} 

#q-numbers .footer { 
    background-color: #eee; 
    text-align: center; 
    padding: 5px 0px; 
} 

.square { 
    vertical-align: middle; 
    text-align: center; 
} 

Answer 2

これらの要素（#q-numbers .blue/#q-numbers .orangeは）table-cellなので、あなたが必要とする唯一のものはspanからすべてが、フォントサイズを削除し、それらにvertical-align: middle;text-align: center;を追加することです。

CSS以下

Updated fiddle

にスタックを見直して、私の答えにコメント、そして何かが不明であるか、欠落している場合は私に知らせてください

#q-numbers > div:first-child { 
 
    font-weight: bold; 
 
    font-size: 1em; 
 
    margin: 10px 10px; 
 
} 
 

 
#q-numbers .table { 
 
    display: table; 
 
    width: 100%; 
 
    border-spacing: 10px; 
 
} 
 

 
#q-numbers .table > div { 
 
    display: table-row; 
 
} 
 

 
#q-numbers .table > div > div { 
 
    display: table-cell; 
 
    width: 50%; 
 
    position: relative; 
 
} 
 

 
#q-numbers .table > div > div > div { 
 
    padding: 4px 0px; 
 
} 
 

 
#q-numbers .blue, 
 
#q-numbers .orange { 
 
    background-color: #ccc; 
 
    border-top: 1px solid #707376; 
 
    border-bottom: 1px solid #707376; 
 
    height: 80px; 
 
    vertical-align: middle;     /* added */ 
 
    text-align: center;      /* added */ 
 
} 
 

 
#q-numbers .square span {     /* deleted all but font size */ 
 
    font-size: 3.5vw; 
 
} 
 

 
#q-numbers .footer { 
 
    background-color: #eee; 
 
    text-align: center; 
 
    padding: 5px 0px; 
 
}

<div id="q-numbers"> 
 
    <div>Defect Incident as of <span id="qval1"></span></div> 
 
    <div class="table"> 
 
    <div> 
 
     <div>Days since last escape</div> 
 
     <div>Best Streak 
 
     <br/>(since 4/5/16)</div> 
 
    </div> 
 
    <div> 
 
     <div class="square orange"><span id="qval2">23</span></div> 
 
     <div class="square blue"><span id="qval3">44</span></div> 
 
    </div> 
 
    </div> 
 
</div>