Problem mit dem zentrieren

Hallo zusammen,
ich möchte gerne auf meiner Webseite eine Bildergalerie einbauen, die beim anklicken des Titelbildes geöffnet wird. Dabei habe ich diese Bildergalerie mit position:absolut und z-index nach vorne gesetzt, nun will ich die Bilder mit margin-right:auto und margin-left:auto zentrieren. Dabei bleibt das Bild jedoch oben Links in der Ecke und bei px angaben oder % verschiebt es sich.
Mein Code:

HTML:
<div class="abdunkeln">
</div>
<div class="rahmen2"><!--Den will ich mittig haben-->
...<!--hier sind alle Bilder in einer Liste, als Bildergalerie, wahrscheinlich unsauber, aber funktionsfähig-->
</div>

CSS:
.rahmen2 {
margin-top: 5%;
margin-right:auto;
margin-left:auto;
border-radius: 5px;
padding-bottom:50px;
padding-left:50px;
padding-right:50px;
padding-top:50px;
height: auto;
width: auto;
background-color:#FFFFFF;
position:absolute;
z-index:4;
}

.abdunkeln {
position: absolute;
height: 100%;
width: 100%;
background-color:#000;
opacity: 0.8;
z-index:3;
}

Ich hab den code schon paar mal neu geschrieben und finde den Fehler einfach nicht. Ich fände es klasse, wenn mir jemand helfen kann

MfG Klaus

Ich verstehe es mittlerweile besser als vorher, aber das Problem bekomme ich dennoch nicht gelöst.
Da ich auch vor habe mit absolut und einem z-index eine neue Ebene zu erstellen, auf der ich die Bildergalerie gemacht habe.
Ich denke Verständnis halber werde ich mein Projekt mal zeigen:
http://rvadler.bplaced.net/Seiten/Sonstige.html#

Hab es mal ausprobiert, jedoch ist es doch ein komplett falscher weg, weil dann der rahmen vor die Seite gestellt wird oder danach.
Ich bekomme auch alle relative Teile zentriert nun ist nur mein Problem, dass es nicht mit dem absolut Teil geht, wenn es überhaupt geht.
Heute ist es auch schon zu spät, wenn sich demnächst ein wenig Zeit finden lässt würde ich mich sehr freuen
Bin leider erst seit Kurzem beim programmieren mit CSS und HTML5 und am besten lerne ich, sowie andere, mit learning-by-doing

Habe jetzt verstanden, woran es ein Problem gibt. Habe es jetzt so gelöst:

rahmen2
{
    left:50%;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left:-450px;
    border-radius: 5px;
    padding:50px;
    height: auto;
    width: 800px;
    background-color:#FFFFFF;
    position:absolute;
    z-index:4;
    display:none;


}

Jedoch vermute ich nun, dass es mit CSS alleine nicht möglich ist, bei unbekannter breite, die Galerie mittig zu setzen. Ich wollte die Galerie nämlich nochmal neu programmieren und nun mit verschieden großen Bildern arbeiten. Wisst ihr noch eine Möglichkeit dies mit pur CSS hin zu bekommen?
Habe in einem Forum die einzige Möglichkeit gefunden, die Breite über JavaScript zu bestimmen.

Den habe ich auch ausprobiert, aber dabei wird der Rahmen und der Hintergrund nicht mehr richtig angezeigt
Hast du dir meine Webseite angeschaut und auf das auf dieser probiert oder nur an Hand meines geposteten codes?

Noch eine Frage am Rande, lässt sich z-index bei allen positions angeben?
Außerdem, kann mir jemand sagen, warum mein Dropdown menü auf allen jeglichen Computer und Handys, mit allen von mir getesteten Browsern funktioniert, nur Apples Geräte dieses nicht öffnen wollen, wobei IOS Simulatoren dagegen dies anzeigen? -.-

Sejuma, danke. Beim überfliegen des Links scheint mir der sehr hilfreich zu sein. Ich werde mich heute Abend nochmal genauer damit beschäftigen.

SinnlosS, ich habe die Webseite bereits auf mehreren Android Geräten und Windows Geräten ausprobiert und dort funktioniert alles einwandfrei Jedoch ist es ein guter hinweis, dessen Inhalt ich einmal mit dem Problem mit IOS verknüpfen werde und mir so das Problem bestimmt klarer wird.