如何使用css在圆形div中垂直居中放置文本

Question

I am wondering what I am neglecting in my css, which is preventing the text from being properly centered vertically? Below is my current code, and here is a fiddle .

Here is my html

<div class="donateButton"><a href="#">Donate</a></div>

This is my CSS

.donateButton {
width:100px;
height:100px;
background-color:#FE6D4C;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin:0 auto 30px;
text-align:center;
}
.donateButton:hover {
background-color:#09C;
}
.donateButton a {
display:block;
width:100%;
color:#FFFFFF;
font-size:1em;
text-decoration:none;
padding-top:50%;
line-height:1em;
margin-top:0.5em;
}

Thanks in advance for any insight.

I also want to make this responsive eventually, but i guess that will be another question :)

Answer 1

If you're sure that the text will be just one line you can do this:

.donateButton a {
    display:block;
    width:100%;
    color:#FFFFFF;
    font-size:1em;
    text-decoration:none;
    line-height:100px;
}

Answer 2

最简单的方法是从文本中删除padding-top，并将行高设置为100px，与div相同。