Unable to put text in center of circular buttons

I'm trying to design a web page which contains three round buttons with some text in them. But, the problem is I couldn't arrange the text to be at the center of the buttons. The text is horizontally centered. But, it is not vertically centered. This is the screenshot of the output: Screenshot

Below is the css used:

button{
width: 10%;
height: 0;
margin-left: auto;
margin-right: auto;
padding-bottom: 10%;
border-radius: 50%;
border: 2px solid #f5f5f5;
box-shadow: 0 0 3px gray;
vertical-align: middle;
text-align: center;
}
button:hover{
    background-color: #E9D66B;
}