Presupunând că elementul părinte are position: relative;, aceste patru proprietăți vor centra un element copil atât pe orizontală, cât și pe verticală în interior, indiferent de lățimea înălțimii fiecăruia.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Vedeți Pen Centerer Mixin de Chris Coyier (@chriscoyier) pe CodePen.
Deși aveți grijă dacă elementul copil care este centrat este mai înalt decât părintele, partea de sus ar putea fi tăiată.
Călăreț
Dacă vrei să poți să te centrezi într-o singură direcție ...
@mixin centerer($horizontal: true, $vertical: true) ( position: absolute; @if ($horizontal and $vertical) ( top: 50%; left: 50%; transform: translate(-50%, -50%); ) @else if ($horizontal) ( left: 50%; transform: translate(-50%, 0); ) @else if ($vertical) ( top: 50%; transform: translate(0, -50%); ) )Vezi Pen yybgZd de Chris Coyier (@chriscoyier) pe CodePen.