CSS: text on button slightly off center

Question

I'm building a landing page and have a button where the text should be centered, but it's coming up slightly above the center.

 .button { background-color: #ED5E93; font-weight: 800; font-size: 2rem; border: none; color: white; padding: 0 16px 0 16px; text-align: center; vertical-align: middle; text-decoration: none; cursor: pointer; height: 3rem; }

 <button type="button" className={indexStyles.button}> Get Started </button>

Answer 1

Use flex CSS property

 button { display:flex; align-items:center; justify-content:center; background-color: #ED5E93; font-weight: 800; font-size: 2rem; border: none; color: white; padding: 0 16px 0 16px; text-decoration: none; cursor: pointer; height: 3rem; }

 <button type="button" className={indexStyles.button}> Get Started </button>

Answer 2

using flex is what I usually use for things like this and it works really well.

Here is a link to the complete guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/

As for your problem. This should work:

.button {
    background-color: #ED5E93;
    font-weight: 800;
    font-size: 2rem;
    border: none;
    color: white;
    padding: 0 16px 0 16px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    height: 3rem;
}

Answer 3

Update: Answer is the font itself. It had a lot of whitespace under it (Khula) that couldn't be removed. The code above works with a font that has equal whitespace above and below.