[CSS] Responsive Div

[BurnerR]

Ich mache hier gerade eine eigentlich sehr einfache Seite fertig, will sie aber responsive haben und da hapert es leicht bei mir das robust umzusetzen.
Ich habe ein div - größe ändert sich noch, aber gehen wir von einem quadrat 500px aus - und das liegt, aktuell mit "bottom: 20%" und "right: 25%" so halbrechts im viewport.

Was ich will:
Das div soll immer weiter nach links rücken, bis es horizontal zentriert ist. Dann soll es vertikal zentriert bleiben, bis viewport-width = 500px ist. Dann soll es skalieren um weiter in den viewport zu passen, bis zu einer mindestgröße, nach der nichts mehr passieren soll.
Analog horizontal.

Überall steht, zentrieren geht mit "margin-left: auto; margin-right: auto" aber irgendwie geht das nicht bei mir.
Hier was ich bisher habe:
[src=css]
body {
background-image: url("../Backgrounds/handshake.jpg");
}

.cta-box {
position: absolute;
background: rgba(0, 0, 0, 0.5);
border: 1px solid #000000;
border-radius: 25px;
}

@media screen and (min-width: 750px) and (min-height: 600px) {
.cta-box {
bottom: 20%;
right: 25%;
}
}

@media screen and (min-width: 500px) and (min-height: 500px) {
.cta-box {
width: 500px;
height: 500px;
}
}

@media screen and (min-width: 500px) and (min-height: 500px) and (max-width: 749px) and (max-height: 599px){
.cta-box {
margin-left: auto ;
margin-right: auto ;
}
}[/src]

Wieso geht das nicht?

 

[sia]

Wenn du ein Element mit [kw]position:absolute[/kw] zentrieren willst, benötigst du folgenden Code:

[src=css]position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;[/src]