Sie scheinen das XY-Problem zu haben. Sie haben eine Aufgabe zu lösen, und statt uns nach der Aufgabe zu fragen, fragen Sie nach einer Lösung, die Sie versucht haben und die wir bereits als unpassend empfunden haben.
Warum möchten Sie die Eigenschaft top gleich der Hälfte der Elementhöhe anwenden und negieren? Weil Sie ein absolut positioniertes Element um die Hälfte seiner Höhe nach oben verschieben möchten . Dies ist die ursprüngliche Aufgabe.
Dafür gibt es eine einfache Lösung, und SASS ist nicht einmal notwendig! (Solange Sie die Höhe des Elements nicht kennen, kann SASS nicht mehr Hilfe bieten als CSS.)
Wir brauchen einen zusätzlichen Wrapper:
%Vor%Um das Element um 50% seiner Höhe nach oben zu schieben, machen Sie zwei einfache Schritte:
1) Schieben Sie die Verpackung vollständig aus dem Behälter:
%Vor%2) Ziehen Sie das Element nun um 50% seiner Höhe nach unten:
%Vor%Das ist es!
Wenn Sie margin-bottom: -50% ausführen, ziehen Sie das Element um 50% nach unten von der -Wrapper Höhe. Aber die Höhe des Wrappers entspricht der Höhe des Elements!
Vergessen Sie nicht, position: relative auf den Container anzuwenden, sonst wird position: absolute relativ zum Fenster, nicht zum Container.
Hier ist eine Demo mit einem gut kommentierten Code: Ссылка
Ich habe gerade gemerkt, dass dies eine Fälschung ist.
In CSS beziehen sich die Prozentsätze der oberen und unteren Ränder auf die Breite des Containers. Das obige Beispiel funktioniert also nur, weil der Container quadratisch ist.
Ich habe einen guten Weg gefunden, dies zu tun. Es verwendet das transform: translate(-50%, -50%)
Hier ein Link zur Lösung: Zentrierungselement
Tags und Links css css3 sass compass-sass