[CSS] Positionierungselemente werden in der Mitte angezeigt

1. Verwenden Sie die Marge

p {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;}

zur Analyse

:

oben: 50 %; links oben im übergeordneten Element zentrieren
margin-top: -50px; left: -50px ;Versetze das Element nach oben und rechts um die Hälfte seines Abstands
2. Verwende Translate

p {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}

Analyse

:

oben links: 50 %; zentrieren Sie die obere linke Seite des Elements vertikal und horizontal im übergeordneten Element
transform: translator(-50%, -50%); Verschieben Sie das Element um die Hälfte seines Abstands nach oben und nach rechts
3. Alle vier Richtungen sind 0, verwenden Sie den Rand zur Positionierung

p {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right : 0;
    margin: auto;}

Analyse

:

Wenn alle vier Richtungen 0 sind, heben sie sich gegenseitig auf und das Feld wird an der Anfangsposition angezeigt
Rand: automatisch ; Zentrieren Sie das Feld vertikal und horizontal
Weitere Artikel zur [CSS]-zentrierten Anzeige von Positionierungselementen finden Sie auf der chinesischen PHP-Website!