En supposant que l'élément parent a position: relative;, ces quatre propriétés centreront un élément enfant à la fois horizontalement et verticalement à l'intérieur, quelle que soit la largeur de la hauteur de l'une ou l'autre.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Voir le Pen Centerer Mixin de Chris Coyier (@chriscoyier) sur CodePen.
Bien que méfiez-vous si l'élément enfant centré est plus grand que le parent, le haut pourrait être coupé.
Fancier
Si vous voulez pouvoir centrer dans une seule direction…
@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%); ) )Voir le Pen yybgZd de Chris Coyier (@chriscoyier) sur CodePen.