I am trying to center the "centered" div vertically within the "top" div. As of right now the "centered" div is vertically centered in the page. I need everything based off percentage, not pixels or ems...
Vertical alignment is always a problem with CSS layouts. This is the only way i can think of achieving it. It requires you to know the height of the object you want to centre vertically, but that is not a problem in your case, as you do know the height.
Basically, follow these steps:
Set the position of the centred object to relative. This will allow you to move it relative to it's parent div.
Set the top to 50%. This will align the top of the centred object to the centre of the parent div.
Finally, set the top margin to negative half the height of the centred div. This will move the centred div so the centre will be aligned with the centre of the parent div.