Centering with CSS not working in Internet Explorer 11

Question

This is driving me crazy. It works in Chrome, I need it work in IE as well. https://jsfiddle.net/h18uwtsf/1/

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

my 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;
}

The results I am getting above can be see in my JSFiddle but the numbers are supposed to center in the gray boxes. In IE they are appearing halfway through the top.

Answer 1

Since those elements (#q-numbers .blue/#q-numbers .orange) are a table-cell, the only thing you need is to remove all but font size from the span and add vertical-align: middle;text-align: center; to them.

See comments in below CSS

Updated fiddle

Stack snippet

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

Answer 2

Using position absolute is not the right way of centering. Use CSS on parent div instead. see this update solution.

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;
}