Completely Centering text in Circular link - html

Question

I've read related answers on the site regarding this topic. I did end up being able to center it by decreasing the font size, however, it left me with small text and a large circle.
Here it is:
<nav>
<ul>
<li class="circle">About
</li>
<li class="circle">Coding
</li>
<li class="circle">Health
</li>
<li class="circle">Contact
</li>
</ul>
</nav>
CSS
.circle {
width: 25px;
height: 25px;
border-radius: 50%;
font-size: 7px;
line-height: 25px;
text-align: center;
}
http://jsfiddle.net/theskinnyreader/c3evfj5b/
I would like to know how I can center text of the size in my code below and keep the size of the circle to a minimum.
CSS
.circle {
width: 10px;
height: 10px;
border-radius: 50%;
font-size: 10px;
line-height: 10px;
text-align: center;
}
http://jsfiddle.net/theskinnyreader/fdu1dqko/

Answer 1

This code works:
What changed here is i made the .circle have a relative position so that the text in the tag can have an absolute position. Then pace the anchor at 50% of top and 50% of left and translate it back 50% and up 50%. I only added the -webkit-transform because my browser is chrome but you should add one with -moz-, -ms-, and -o- as well
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0;
10px;
padding: 0;
}
nav li {
display: inline-block;
margin: 20px;
padding: 3%;
border: 1px solid black;
}
.circle {
position: relative;
width: 25px;
height: 25px;
border-radius: 50%;
line-height: 25px;
text-align: center;
}
.circle a {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}