Za předpokladu, že nadřazený prvek má position: relative;, tyto čtyři vlastnosti vycentrují podřízený prvek vodorovně i svisle uvnitř, bez ohledu na to, jaká je šířka výšky.
@mixin centerer ( position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ).parent ( position: relative; ) .child ( @include centerer; )Podívejte se na mixér Pen Centerer od Chrisa Coyiera (@chriscoyier) na CodePen.
I když si dejte pozor, pokud je podřízený prvek ve středu vyšší než nadřazený, horní část by se mohla uříznout.
Chovatel
Pokud chcete být schopni vycentrovat pouze jedním směrem ...
@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%); ) )Podívejte se na Pen yybgZd od Chrisa Coyiera (@chriscoyier) na CodePen.