Olettaen, että ylätason elementillä on position: relative;, nämä neljä ominaisuutta keskittävät lapsielementin sekä vaaka- että pystysuoraan sisälle, riippumatta siitä, kumman korkeuden leveys on.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Katso Chris Coyierin (@chriscoyier) Pen Centerer Mixin CodePenistä.
Vaikka varo, jos keskitettävä lapsielementti on vanhempaa pidempi, yläosa voi leikkautua.
Harrastaja
Jos haluat pystyä keskittymään vain yhteen suuntaan ...
@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%); ) )Katso Chris Coyierin (@chriscoyier) kynä yybgZd CodePenistä.