0x7F800000: boxen in X-richtung absolut positionieren, in Y zentrieren?

Beitrag lesen

Schönen guten Tag allerseits.
Diesmal komme ich mit einer wesentlich konkreteren Frage:

Angenommen, ich habe zwei ineinader verschachtelte div-blöcke:

  
<div id="outerBox">  
 die aeussere box  
 <div id="innerBox">  
  die innere box  
 </div>  
</div>  

und will die innere Box nun horizontal zentriert genau 100 px vom oberen rand entfernt bezüglich der äußeren Box positionieren.
Ich habe eigentlich gehofft, dass margin-left & margin-right auf "auto" stellen reicht:

  
/*  irgendwie unsinnig in den raum geworfene aeussere box */  
#outerBox{  
 background-color: green;  
 width:   500px;  
 height:   200px;  
 position:  relative;  
 left:   250px;  
}  
  
/*  die innere box soll  genau 100px abstand vom oberen Rand der umgebenden box haben,  
 und bzgl. der umgebenden box in horizontaler richtung zentriert sein  
*/  
#innerBox{  
 background-color: red;  
 position:  absolute;  
 top:   100px;  
 margin-left:  auto;  
 margin-right:  auto;  
}  

jedoch bewirkten diese Einstellungen keinerlei Auswirkungen: die innere box klebt am linken Rand der äußeren Box.

Wie zentriere ich nun solche absolut positionierten div-blöcke?

Entschuldigt mich, wenn die Frage euch allzugut bekannt vorkommen sollte: ich habe viele ähnliche sachen gefunden, aber irgendwie nie wirklich das, wonach ich gesucht habe.

Vielen Dank im voraus.
0x7F800000