How to center the text larger than the container? - html

Question

Here is the code:
#add_cal_in {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 50px;
text-align: center;
background-color: #f38268;
display: inline-block;
vertical-align: top;
cursor: pointer;
color: #fff;
margin-left: 5px;
}
<span id="add_cal_in">M</span>
If you run this code, you can see that the text "M" is not centered as I imagined. It works fine if you change the font-size to 30px or smaller. How did that happen? And how can I center the "M" right in the middle?
Another thing is although the "M" is not HORIZONTALLY centered, it seems that the "M" is still VERTICALLY centered. BUT, if I change the "M" to a "+", it will not be centered neither HORIZONTALLY nor VERTICALLY. BTW, it works perfectly in Chrome 53, I found that after I upgraded my Chrome.
Sorry about the poor English, hope you can understand what I mean.

Answer 1

You can use Flexbox and if you set align-items: center and justify-content: center it will always center text in span.
span {
margin: 20px;
width: 30px;
height: 30px;
font-size: 50px;
text-align: center;
background-color: #f38268;
display: inline-block;
cursor: pointer;
color: green;
display: flex;
align-items: center;
justify-content: center;
}
<span>M</span>
<span>+</span>
<span>A</span>
Another option is to use pseudo-element to add letter and use position: absolute and transform: translate to center it.
span {
margin: 20px;
width: 30px;
height: 30px;
font-size: 50px;
text-align: center;
background-color: #f38268;
display: inline-block;
cursor: pointer;
position: relative;
}
span:after {
position: absolute;
left: 50%;
top: 50%;
content: 'M';
color: green;
transform: translate(-50%, -50%);
}
<span></span>

Answer 2

I think just change the width and height with 100%..
#add_cal_in {
width: 100%;
height: 100%;
line-height: 30px;
font-size: 50px;
text-align: center;
background-color: #f38268;
display: inline-block;
vertical-align: top;
cursor: pointer;
color: #fff;
margin-left: 5px;
}
<span id="add_cal_in">M</span>

Answer 3

You can center letter horizontally by script:
var marginLeft = ($('#add_cal_in').width() - $('.letter').width())/2;
$('.letter').css('margin-left', marginLeft+'px');
#add_cal_in {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 50px;
text-align: center;
background-color: #f38268;
display: inline-block;
vertical-align: top;
cursor: pointer;
color: #fff;
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="add_cal_in"><span class="letter">M</span></span>

Answer 4

Do you mean like this?
#add_cal_in {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 50px;
text-align: center;
background-color: #f38268;
display: inline;
vertical-align: top;
cursor: pointer;
color: #fff;
margin-left: 5px;
}
<span id="add_cal_in">M</span>