div居中的方法

div 实现垂直居中

• 绝对定位 + margin : auto + left/right/top/bottom : 0;

@mixin center0{
     position: absolute;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     margin: auto;
   }

• margin 可以使用负间距来移动位置 ，而padding不可以，使用负间距来使div居中

@mixin center1 {
     position: absolute;
     left:50%;
     top:50%;
     margin-left: -250px;
     margin-top: -250px;
   }

• 在元素没有定义固定宽高时， 使用transform来居中元素

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

• 不定宽高 垂直居中 使用flex布局

@mixin center3{
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
   }
   //使用 @include 来引入mixin
   //使用@extend来继承类名
.box{
    @include center3();
    @extend .tablecell;
    width: 100%;
    height: 100%;
  }