//----------------------------------
//
//**
// *
// * @authors liwb(lwbhtml@163.com)
// * @date    2017/7/3 16:31
// * @version $
// * @desc 实现盒子的水平、垂直居中
// */
//----------------------------------

//  使用translate
.center-translate(@direction: both) {
  position: absolute;

  .direction() when (@direction = both) {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }

  .direction() when (@direction = horizontal) {
    left: 50%;
    transform: translate3d(-50%, 0, 0);
  }

  .direction() when (@direction = vertical) {
    top: 50%;
    transform: translate3d(0, -50%, 0);
  }

  // kickstart it
  .direction();
}

// absolute 绝对居中(相对于固定宽高的容器)
.center-absolute(@width, @height){
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -(@width / 2);
  margin-top: -(@height / 2);
  width: @width;
  height: @height;
}