/// 元素垂直水平居中
/// @param  {[string]} $justify      [center] 水平对齐方向,[false] 水平方向不设置
/// @param  {[string]} $align      [center] 垂直对齐方向,[false] 垂直方向不设置
/// @example
/// //SCSS
/// 
/// .justify-center {
///     @include box-center;
/// }
/// 
/// //CSS
/// 
/// .justify-cnter {
///     display: flex;
///     justify-content: center;
///     align-items: center;
/// }
/// 
/// @author 大漠

@mixin box-center($justify:center, $align: center) {
    display:flex;

    @if($align !=false) {
        align-items: $align;
    }
    @if($justify !=false) {
        justify-content: $justify;
    }
}

/// 使用translate实现水平垂直居中
/// @param {String} $direction [both] - 水平垂直,其它值`horizontal`和`vertical`
/// @example
/// //SCSS
/// .center{
///   @include center-translate;
/// }
/// //CSS
/// .center {
///   position: absolute;
///   top: 50%;
///   left: 50%;
///   transform: translate3d(-50%, -50%, 0);
/// }
@mixin center-translate($direction: both) {
    position: absolute;
    @if $direction == both {
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
    }
    @else if $direction == horizontal {
        left: 50%;
        transform: translate3d(-50%, 0, 0);
    }
    @else if $direction == vertical {
        top: 50%;
        transform: translate3d(0, -50%, 0);
    }
}