Div Box in Div Box

[mase]

Hallo,

ich möchte eine Div Box mit Inhalt in einer anderen Div Box horizontal  und vertikal zentrieren.
Das Vertikale hat schon geklappt nur das horizontale nicht.
Da sich meine Seite der jeweiligen Browserfenstergröße anpassen soll kann ich eigentlich nur mit Prozenten arbeiten damit es immer in der Mitte sitzt.
Die Prozentangaben sollen sich auf die aüßere Div Box die height:100% und width:100% hat beziehen.
Wenn ich jetzt aber bei der inneren Div Box sage 50% bezieht sich das irgendwie nicht auf die äußere Box.
Die wird dann plötzlich größer.
Was muss ich tun?

Wäre euch sehr dankbar für eure Hilfe!

P.S.

Hier was ich bisher gemacht habe:

<style type="text/css" media="screen">  
#box  
      { background-color: red; visibility: visible; position: absolute; z-index: 1; top: 0; right: 0; left: 0; width: 100%; height: 100%; min-width: 1250px; list-style-type: none; }  
#box2  
      { line-height: 20%; text-align: center; list-style-type: none; margin-top: 20%; z-index: 2; right: 0; left: 0; width: 100%; height: auto; border: dotted 1px gray }  
  
</style>

<div id="box">  
            <div id="box2">  
                <a href="#CONTENT1" name="CONTENTA"><img src="dot.gif"></a>  
                <a href="#CONTENT2" name="CONTENTB"><img src="dot.gif"></a>  
                <a href="#CONTENT3" name="CONTENTC"><img src="dot.gif"></a>  
        </div></div>