scss 垂直和水平对齐SASS mixin

Posted 2021-05-18

/*
  EX: 
  .container{
    @include vertical-align(".container-content");
  }
*/
@mixin vertical-align($content: null, $content-height: auto, $container-height: null) {
    display: table;

    @if $container-height != null {
        height: $container-height;
    }

    #{$content} {
        display: table-cell;
        vertical-align: middle;
        height: $content-height;
    }
}

// directly from jeet.gs (https://github.com/mojotech/jeet)
// horizontal and vertical
// EX: @include align(vertical);
@mixin align($direction: both) {
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;

  @if index("horizontal" "h", $direction) {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  } @else if index("vertical" "v", $direction) {
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  } @else if index("none", $direction) {
    top: auto;
    left: auto;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
  } @else {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
}