居中CSS不能在Internet Explorer 11中工作

Question

这让我疯狂。它在Chrome中工作，我也需要它在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>