Line-Height - Leaves No Vertically Centered Text

Question

I’m using the line-height to center a text vertically. But the text seems to me to have a small margin. Look at the image below, I selected the font to better see the spacing that’s making the difference in centering time.

You can fix that ?

#userNome{
    width: 98%;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 20px;
    line-height: 2;
    text-align: center;
    background-color: #FFF;
    border-radius: 5px;
    font-family: "Luckiest Guy";
    color: #AF3846;
    font-size: 26px;
    &.show{
        display: block;
    }
}

<div id="userNome">Olá, Diego Souza</div>

Answer 1

The line-height does not serve to align the text vertically, who does it is the vertical-align (in your case, you want to vertical-align: middle;).

However, the line-height is necessary because the vertical-align align according to the line height and not the container in which the text is, ie you still need the line-height.