Wenn Sie ein absolutes Element zentrieren möchten
#div {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
Wenn ein Container von links nach rechts, aber nicht von oben nach unten zentriert werden soll
#div {
position:absolute;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
Wenn Sie möchten, dass ein Container von oben nach unten zentriert wird, unabhängig davon, ob er von links nach rechts steht
#div {
position:absolute;
top:0;
bottom:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
Update vom 15. Dezember 2015
Nun, ich habe vor einigen Monaten einen weiteren neuen Trick gelernt. Angenommen, Sie haben ein relatives übergeordnetes Element.
Hier kommt Ihr absolutes Element.
.absolute-element {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:50%; /* You can specify ANY width values here */
}
Ich denke, dass dies eine bessere Lösung ist als meine alte Lösung. Da man nicht Breite UND Höhe angeben muss. Diese passt den Inhalt des Elements selbst an.
Stand: 23. April 2021
Es ist keine Antwort auf die Frage des Auftraggebers nach der absoluten Position, aber wenn Sie eine alternative Lösung suchen, gibt es die folgende flexbox . Hier ist ein Beispiel.
#parent {
display:flex;
align-items:center;
justify-content:center;
}
Der Container wird umgewandelt in flex und zum Ausrichten untergeordneter Elemente auf die Mitte der Horizontalen wird mit justify-content:center und vertikal ist zu verwenden align-items:center . Es unterstützt auch moderne Browser, so dass es sicher zu verwenden ist.
Allerdings sollten Sie zuerst lesen, wie Flexbox funktioniert.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Unterstützte Flexbox-Browser
https://caniuse.com/flexbox
