Center one char in a rounded button element cross browser - html

Question

I have a button with just one character which I would like to have exactly in the middle of the button
<button>+</button>
I have the following css:
button {
border: 2px solid lightgrey;
border-radius: 20px;
background-color: #fff;
outline: none;
height: 40px;
width: 40px;
font-size: 30px;
font-weight: 700;
line-height: 30px;
color: grey;
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
}
JSFIDDLE
I probably have to many css properties in here but I have tried many different solutions. I've tested this button on chrome, safari and iPad:
None of them seem to be exactly at the center of the button. How can I do this cross browser ?
UPDATE: Even with the suggestions given below, I still see differences in different browsers. It is still hard to pixel-perfect center the chars. The solution I switched to is to use a svg for the chars, which solves this problem.

Answer 1

Here, try this CSS only plus button. I prefer using SVGs for icons, but you can use this ccs only button too :)
Markup
<button class="plus-button plus-button--small"></button>
<button class="plus-button"></button>
<button class="plus-button plus-button--large"></button>
SCSS
.plus-button {
border: 2px solid lightgrey;
background-color: #fff;
font-size: 16px;
height: 2.5em;
width: 2.5em;
border-radius: 999px;
position: relative;
&:after,
&:before {
content: "";
display: block;
background-color: grey;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&:before {
height: 1em;
width: 0.2em;
}
&:after {
height: 0.2em;
width: 1em;
}
}
.plus-button--small {
font-size: 12px;
}
.plus-button--large {
font-size: 22px;
}
https://jsfiddle.net/robi_osahan/gwgL7Loj/

Answer 2

You could try with these CSS:
button {
border: 2px solid lightgrey;
border-radius: 20px;
background-color: #fff;
outline: none;
height: 40px;
width: 40px;
cursor: pointer;
user-select: none;
position: relative;
}
span {
color: grey;
font-size: 30px;
font-weight: 700;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Here's a jsfiddle: https://jsfiddle.net/e490xzpy/5/

Answer 3

button {
border: 2px solid lightgrey;
border-radius: 50%;
background-color: #fff;
outline: none;
height: 40px;
width: 40px;
font-size: 30px;
font-weight: 700;
line-height: 10px;
color: grey;
cursor: pointer;
user-select: none;
text-align: center;
display:block;
}
And the fiddler link is
https://jsfiddle.net/3gfkpm0h/1/

Answer 4

I didn't fork your code, in fact I was coding something similar myself. I'm sharing my experience with you about absolutely centering (or middling or whatever) the icon inside a button.
If you are using line-height and border at the same time, you should subtract the total width of the border (sum of top and bottom border-width),
Absolute centering may not always be satisfying with every font-face you use with the buttons. The centering may look a bit off due to that font's baseline.
So, here is my take. Two techniques that I often use for these kinds of things:
Subtract the border-width from the line-height and stay happy with it.
Bring it one step further by adding an extra element within the relatively positioned button, and absolutely middle it using CSS transforms!
Here are some examples for you to test it yourself.
.btn {
position: relative;
display: inline-block;
vertical-align: bottom;
border: 2px solid;
width: 40px;
height: 40px;
line-height: 36px;
/* line-height = (height) - (border-top-width) + (border-bottom-width); */
background-color: #fff;
border-radius: 50%;
font-weight: 700;
font-size: 30px;
}
.btn-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
line-height: 1;
}
<h3>Button without extra-element</h3>
<button class="btn">+</button>
<button class="btn">X</button>
<button class="btn">x</button>
<h3>Button with extra-element (.btn-icon)</h3>
<button class="btn"><span class="btn-icon">+</span></button>
<button class="btn"><span class="btn-icon">X</span></button>
<button class="btn"><span class="btn-icon">x</span></button>
See yourself what suits best for you. Hope it helped. Cheers!