Υποθέτοντας ότι έχει το γονικό στοιχείο position: relative;, αυτές οι τέσσερις ιδιότητες θα κεντράρουν ένα θυγατρικό στοιχείο τόσο οριζόντια όσο και κάθετα μέσα, ανεξάρτητα από το πλάτος του ύψους και των δύο.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Δείτε το Pen Centerer Mixin του Chris Coyier (@chriscoyier) στο CodePen.
Αν και προσέξτε εάν το στοιχείο του παιδιού που βρίσκεται στο κέντρο είναι ψηλότερο από το γονέα, η κορυφή θα μπορούσε να αποκοπεί.
Εκτρέφων ζώα
Αν θέλετε να μπορείτε να κεντράρετε σε μία μόνο κατεύθυνση
@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%); ) )Δείτε το Pen yybgZd του Chris Coyier (@chriscoyier) στο CodePen.