Positionsattribut absolute und relative horizontale Zentrierung im CSS-Stil

Zuerst müssen wir diese beiden Arten der Positionierung in Stilen verstehen;

absolute (absolute Positionierung): Ziehen Sie das zugewiesene Objekt aus dem Dokumentfluss und verwenden Sie links, rechts, oben, unten und andere Attribute dazu relativ Führen Sie eine absolute Positionierung für das nächstgelegene übergeordnete Objekt mit Positionierungseinstellungen durch. Wenn für das übergeordnete Objekt keine Positionierungsattribute festgelegt sind, wird es gemäß den Standardregeln festgelegt (Positionierung basierend auf der oberen linken Ecke des Körpers als Referenz). Gleichzeitig kann das absolut positionierte Objekt kaskadieren.

relativ (relative Positionierung): Objekte können nicht überlappen. Verwenden Sie die Attribute links, rechts, oben, unten und andere, um sie im normalen Dokumentenfluss zu positionieren.

Zentrierung:

1. Um den Effekt der adaptiven Zentrierung für Objekte zu erzielen, die eine absolute Positionierung verwenden, muss beispielsweise die Breite des Objekts festgelegt werden

.ceshi
    { 
        position:absolute;
        bottom: 10%;
        display: block;
        width: 250px;
        left:50%;
        margin-left:-125px;
        }

2. Für das Objekt, das die relative Positionierung verwendet, um den Zentrierungseffekt zu erzielen, ist sein Referenzobjekt es selbst, und die folgenden Einstellungen können vorgenommen werden:

.ceshi2
{
margin：0 auto;
}

Das obige ist der detaillierte Inhalt vonPositionsattribut absolute und relative horizontale Zentrierung im CSS-Stil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!