Center link text in a circle - html

Question

I have a cicle created with CSS that is positioned absolutely in it's container. The text in the circle is a link. Can this link be centered vertically and horizontally inside the circle? I am testing on Firefox and Chrome with the browser set to 320px wide. I am also testing on the iOS Safari Mobile.
Here is a fiddle I made to demonstrate where I am at with this at the moment:
http://jsfiddle.net/rFZBA/
Here is the HTML:
<div class="container">
<div class="circle">
+
</div>
</div>
Here is the CSS:
.container {
position:relative;
width:300px;
height:100px;
background-color:#999;
}
.circle {
position:absolute;
left:100px;
top:50px;
height:1.25em;/** 20px / 16px = 1.25em **/
width:1.25em;/** 20px / 16px = 1.25em **/
padding:0.75em; /** 12px / 16px = 0.75em **/
border-radius:1.375em; /* Half of 44px is 22px :: 22px / 16px = 1.375em **/
background-color:#4d90fe;
color:#FFF;
box-shadow:1px 1px 2px 2px rgba(0, 0, 0, 0.4);
text-align:center;
}
.circle > a {
color:#FFF;
text-decoration:none;
font-size:2.5em;
font-weight:bold;
}

Answer 1

Simply apply the .circle to the <a> tag: http://jsfiddle.net/rFZBA/16/
And then do some little modifications so that the size is good.
It's automatically centered here as the border is around the text and the text is of quadratic size (a single +). Also, don't forget to make the line-height equal to the height and with, so that's centered vertically.

Answer 2

use line-height and text-align
.circle > a {
color:#FFF;
text-decoration:none;
font-size:2.5em;
font-weight:bold;
line-height:0.625em /* wich is 1.25em (2.5/5X1.25) or use : 1.25rem; */;
text-align:center;
}

Answer 3

Did you try something like this?
http://jsfiddle.net/rFZBA/10/
.circle > a {
color:#FFF;
text-decoration:none;
font-size:2.5em;
font-weight:bold;
display:block;
position:absolute;
left:10.5px;
top:0px;
}

Answer 4

I was able to get it centered by adding display: table; to .circle and display: table-cell; vertical-align: middle; to .circle a; however, it created an oblong object rather than a pure circle. Here's the fiddle. http://jsfiddle.net/Nirvanachain/rFZBA/
If I change the font size of the <a> to 16px, then you have exactly what you want.