l-hammer/YDTemplate

/** 
 * 上下垂直居中
 */
$center: center;
%__right {
  position: absolute;
  left: 50%;
}

%__lower {
  position: absolute;
  top: 50%;
}

%__lower_right {
  position: absolute;
  left: 50%;
  top: 50%;
}

/** 
* mobile && >=IE 9
*/
@mixin center {
  @extend %__lower_right;
  transform: translate(-50%, -50%);
  @content;
}

@mixin justify-center {
  @extend %__right;
  transform: translateX(-50%);
  @content;
}

@mixin align-center {
  @extend %__lower;
  transform: translateY(-50%);
  @content;
}

/** 
* pc && <=IE 8
*/
@mixin pc-center($left: auto, $top: auto) {
  @extend %__lower_right;
  margin-left: $left;
  margin-top: $top;
  @content;
}

@mixin pc-justify-center($left: auto) {
  @extend %__right;
  margin-left: $left;
  @content;
}

@mixin pc-align-center($top: auto) {
  @extend %__lower;
  margin-top: $top;
  @content;
}

// @mixin center($left: auto, $top: auto) {
//     @extend %__lower_right;
//     @supports not (transform-origin: center) {
//         margin-left: $left;
//         margin-top: $top;
//     }
//     @supports (transform-origin: center) {
//         transform: translate(-50%, -50%);
//         @content;
//     }
//     transform: translate(-50%, -50%);
// }
// @mixin justify-center($left: auto) {
//     @extend %__right;
//     @supports not (transform-origin: center) {
//         margin-left: $left;
//     }
//     @supports (transform-origin: center) {
//         transform: translateX(-50%);
//         @content;
//     }
//     transform: translateX(-50%);
// }
// @mixin align-center($top: auto) {
//     @extend %__lower;
//     @supports not (transform-origin: center) {
//         margin-top: $top;
//     }
//     @supports (transform-origin: center) {
//         transform: translateY(-50%);
//         @content;
//     }
//     transform: translateY(-50%);
// }