scss 垂直/水平中心显示表https://css-tricks.com/snippets/sass/centering-mixin/

Posted 2021-05-18

<div class="parent">
  <div class="child">I'm centered!</div>
</div>

@mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// Usage

.parent {
  position: relative;
}
.child {
  @include centerer;
}


/* - - - - - More flexible - - - - - - */

@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%);
  }
}


// Usage

.child {
  &.both {
    @include centerer;
  }

  &.horizontal {
    @include centerer(true, false);
  }

  &.vertical {
    @include centerer(false, true);
  }
}