The first mistake you made was common , so no worries, and that is to code TRYING to make it LOOK some way rather than using semantics. The CSS part is just experience, that will come soon enough 
Explaining what I did:
Vertically centering was a trick. As you noticed you cant really vertically center on anything else but TDs , but we really could use display TD here to begin with and trying to do so would lead to adding semantically unnecessary tags anyway. So whats to do? CHEAT. You really cant use padding, because the box model add s padding to the height/width… so unless you measured the text exactly(another thing you SHOULDN’T EVER DO) you would get these misshapen circles. So we use LINE-HEIGHT , which works as long as we dont have to wrap the text… but since everything was one or two words… that was unlikely to happen.
Since we eliminated the extra tags, the problem with the dual borders on hover was automatically solved.
but rather learn the relevant methods for whatever it is that I am trying to do–perhaps this is the issue?
it could be. You will come to realize that is a really bad idea to write CSS piecemeal. What ever you do to one thing affects all things in the cascade , so a method that may solve your immediate issue may cause something else down the line. Thus the most effective frame of mind is to keep things simple and to think of the WHOLE code rather than one problem at a time.
Hope that sheds a little light on the subject , for you.