Text not centering in a span in Internet Explorer - html

Question

I want to center-align the text in the span. Why does it only work in Chrome, but no IE?
.txt {
align-items: center;
background-color: rgba(0, 0, 0, 0.0980392);
background-image: none;
border-bottom-color: rgba(0, 0, 0, 0.117647);
border-bottom-style: solid;
border-bottom-width: 1px;
border-collapse: collapse;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgba(0, 0, 0, 0.117647);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgba(0, 0, 0, 0.117647);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgba(0, 0, 0, 0.117647);
border-top-style: solid;
border-top-width: 1px;
box-shadow: none;
box-sizing: border-box;
color: rgb(0, 0, 0);
cursor: default;
display: flex;
fill: rgb(0, 0, 0);
float: left;
font-family: MetricWeb-Medium, arial;
font-size: 16px;
height: 48px;
justify-content: center;
line-height: 16px;
margin-bottom: 1.54688px;
margin-left: 1.54688px;
margin-right: 1.54688px;
margin-top: 1.54688px;
outline-color: rgb(0, 0, 0);
outline-style: none;
outline-width: 0px;
padding-bottom: 6px;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
text-align: center;
white-space: nowrap;
width: 35.875px;
-webkit-user-select: none;
}
<span class="txt">2016</span>
https://jsfiddle.net/ramseyfeng/fd5sxv27/

Answer 1

The problem is the way each browser renders the left and right padding.
In your code you have:
.txt {
padding-left: 12px;
padding-right: 12px;
}
Chrome basically ignores this padding when centering the text in the small container:
But IE11 respects the padding:
The solution is to simply remove the horizontal padding:
.txt {
padding-left: 0;
padding-right: 0;
}
Revised Fiddle

Answer 2

I made an amendment to your jsfiddle;
Your font-size will not work with the padding you've selected with the font-size. Padding-Left was causing the off-center shift from the left side. Also your box is way too small for the font-size of 16 pts.
Jsfiddle Change ver5 - Removed padding all together, keeping the same font-size, and increased width to 70px.
Jsfiddle Change ver6 - Reduced Font Size to 12px from 16 and padding left and right reduced to 3px from 6px & 12px.
https://jsfiddle.net/fd5sxv27/5/
.txt {
align-items: center;
background-color: rgba(0, 0, 0, 0.0980392);
background-image: none;
border-bottom-color: rgba(0, 0, 0, 0.117647);
border-bottom-style: solid;
border-bottom-width: 1px;
border-collapse: collapse;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgba(0, 0, 0, 0.117647);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgba(0, 0, 0, 0.117647);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgba(0, 0, 0, 0.117647);
border-top-style: solid;
border-top-width: 1px;
box-shadow: none;
box-sizing: border-box;
color: rgb(0, 0, 0);
cursor: default;
display: flex;
fill: rgb(0, 0, 0);
float: left;
font-family: MetricWeb-Medium, arial;
font-size: 16px;
height: 48px;
justify-content: center;
line-height: 16px;
margin-bottom: 1.54688px;
margin-left: 1.54688px;
margin-right: 1.54688px;
margin-top: 1.54688px;
outline-color: rgb(0, 0, 0);
outline-style: none;
outline-width: 0px;
text-align: center;
white-space: nowrap;
width: 70px;
-webkit-user-select: none;
}
https://jsfiddle.net/fd5sxv27/6/
.txt {
align-items: center;
background-color: rgba(0, 0, 0, 0.0980392);
background-image: none;
border-bottom-color: rgba(0, 0, 0, 0.117647);
border-bottom-style: solid;
border-bottom-width: 1px;
border-collapse: collapse;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgba(0, 0, 0, 0.117647);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgba(0, 0, 0, 0.117647);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgba(0, 0, 0, 0.117647);
border-top-style: solid;
border-top-width: 1px;
box-shadow: none;
box-sizing: border-box;
color: rgb(0, 0, 0);
cursor: default;
display: flex;
fill: rgb(0, 0, 0);
float: left;
font-family: MetricWeb-Medium, arial;
font-size: 12px;
height: 48px;
justify-content: center;
line-height: 16px;
margin-bottom: 1.54688px;
margin-left: 1.54688px;
margin-right: 1.54688px;
margin-top: 1.54688px;
outline-color: rgb(0, 0, 0);
outline-style: none;
outline-width: 0px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 12px;
padding-top: 6px;
text-align: center;
white-space: nowrap;
width: 35.875px;
-webkit-user-select: none;
}