Vertical alignment of text inside div - html

Question

I really need help on this: cracking me for 2nd day already. I have the following code:
* {
margin: 0;
padding: 0;
font: 16px Verdana, Arial, sans-serif;
color: #444;
line-height: 1.5rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
}
.inlbtn {
width: 2rem;
height: 2rem;
display: table;
text-align: center;
font-weight: bold;
color: #666;
border: 1px solid #939393;
}
.plus {
font-size: 1.5rem;
font-weight: bold;
display: table-cell;
vertical-align: middle;
}
.plus:before {
content: "+";
}
<div class='inlbtn'><span class='plus'></span></div>
It basically has a div and span inside with a "+" symbol. The horizontal alignment seems fine, but the vertical is a little shifted down. How to make it perfectly centered vertically?
I played around with the code and it seems the code under * is the culprit, but why?
Here's fiddle http://jsfiddle.net/jk34josq/2/

Answer 1

You do everything right, I always use the same method. The problem is that this line
content: "+";
is a piece of text, so it automatically has top margin inside of the line-height preserved for the capital letters (and + symbol is not the one); the margin value could also be different depending on the font.
As a proof try the following:
content: "A";
This looks centered.
What you can do to avoid this behavior:
Negative margin / top property
Use image instead of text
Maybe play with reducing the line-height property but I have doubts about this method

Answer 2

I would use only a single HTML element, since there is no need for using an extra element nor a :before pseudo class:
<div class='inlbtn'>+</div>
Then I would use display: inline-block, instead of table.
As mentioned by Simon in his answer, the + character is smaller than A. But instead of using negative margins or paddings, I would alter the line-height:
.inlbtn {
width: 2rem;
height: 2rem;
font-size: 1.5rem;
line-height: 1.5rem;
display: inline-block;
text-align: center;
font-weight: bold;
color: #666;
border: 1px solid #939393;
}
Updated Fiddle

Answer 3

Try like this: Demo
.inlbtn {
width: 2rem;
height: 2rem;
display: block;
text-align: center;
font-weight: bold;
color: #666;
border: 1px solid #939393;
}
.plus {
font-size: 1.5rem;
font-weight: bold;
display: inline-block;
vertical-align: middle !important;
}
.plus:before {
content:"+";
display: inline-block;
}