Verwenden Sie in CSS negative Randwerte, um die Mittelposition anzupassen

Dies ist möglicherweise die am häufigsten verwendete Zentriermethode. Wenn Sie die Größe jedes Elements kennen, legen Sie einen negativen Randwert fest, der der Hälfte der Breite und Höhe entspricht (wenn Sie den Box-Sizing: Border-Box-Stil nicht verwenden, müssen Sie auch einen Füllwert hinzufügen) und passen Sie ihn dann an oben: 50 %; links: 50 %; Stil zentriert das Blockelement.

Es ist zu beachten, dass dies die einzige Möglichkeit ist, wie erwartet unter IE6-7 zu arbeiten.

CSS-CodeInhalt in die Zwischenablage kopieren

.is-Negative {       
        width: 300px;       
        height: 200px;       
        padding: 20px;       
        position: absolute;       
        top: 50%; left: 50%;       
        margin-left: -170px; /* (width + padding)/2 */      
        margin-top: -120px; /* (height + padding)/2 */      
}

Vorteile:

Browserkompatibilität ist sehr gut, unterstützt sogar IE6-7
Geringer Programmieraufwand erforderlich

Außerdem beachten:

Dies Da es sich um eine nicht reagierende Methode handelt, können Sie weder die prozentuale Größe verwenden noch die Maximal- und Minimalwerte von Min-/Max- festlegen.
Der Inhalt kann den Container überschreiten.
Es muss Platz zum Auffüllen oder zur Boxgröße reserviert werden: Es muss der Rahmen-Box-Stil verwendet werden.

Weitere verwandte Artikel zur Verwendung negativer Randwerte in CSS zum Anpassen der Mittelposition finden Sie auf der chinesischen PHP-Website!