Stacking three elements on top of each to other centred in a div.

Hello, i've been doing pretty well with my site so far and i'm now at a frustrating point where i think i am messing up my code trying to solve this problem.

I have three circles in a div, each circle is slightly larger than the other.

<div class="nav"> <div class="circle"></div> <div class="circle2"></div> <div class="circle3"></div> </div>

What i would like to do is 1st. Center all of them horizontal and vertically in the containing "nav" div. which has a width: 100%; height: 400px;

2nd i want to stack each of the circles on top of each other so you get a small circle centred within a large circle, which is in turn centred within a larger circle.

Please help, this is driving me loopy!

Thank You solo much!

Ross