Vertically center <a> tag?

Question

I'm struggling to vertically centre tag in of of the elements.

What I've got is something like:

http://jsbin.com/arudif/2/edit

<style>
 header {padding: 20px 0 20px 0; clear: both;}
 header a {
   float: right;
   vertical-align: middle; 
   margin: auto 0 auto 0;
   } 
   //This is what I tried, doesnt work
</style>

<header>
   <a href="#">Center Me Please!</a>
   <p> Stack Overflow </p>
</header>

I just can't figure auto ho to fix that tag in the header

Answer 1

To Center a without taking in consideration the other contents of the container, use absolute positioning.

header
{
    position:relative;
}
a
{
    position:absolute;
    top: 50%; // nearly 50%, but not exactly 50%
    left: 50%;
}