Forutsatt at det overordnede elementet har position: relative;, vil disse fire egenskapene sentrere et underordnet element både horisontalt og vertikalt inne, uansett hvilken bredde på høyden til begge er.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Se Pen Centerer Mixin av Chris Coyier (@chriscoyier) på CodePen.
Selv om du er forsiktig hvis barnelementet som er sentrert, er høyere enn foreldrene, kan toppen bli avskåret.
Fancier
Hvis du bare vil kunne sentrere i en retning ...
@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%); ) )Se Pen yybgZd av Chris Coyier (@chriscoyier) på CodePen.