二--scss-居中

scss

(可以定义变量，复用性强,sass是名称， scss是后缀名)
①安装sass

npm  install sass-loader --save-dev
npm install node-sass --sava-dev

②在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}

③ 使用scss时候在所在的style样式标签上添加lang=”scss”

<style lang="scss" scoped>  //scoped是私有
**@import '../../assets/css/common.scss'; //导入外部scss文件**
  .btn {
    **background-color: $color-btn-a**
    outline: none;
    border: 0;
    cursor: pointer;
    &.ant-btn::focus {
      color: inherit !important;
      background-color: inherit !important;
      border-color: inherit !important;
    }
    &:hover {
      **background-color: $color-btn-a-hover**;
    }
  }

④在assets中建common.scss

// 按钮颜色
$color-btn-a: red;
$color-btn-a-hover: red;

// 主题颜色
$color-a:#fff;
$color-b:#ccc;

// 字体颜色
$font-color : $color-a;

// 背景颜色
$bgc-color : $color-b;

居中

/* 绝对定位居中    如果内容的宽高不固定的情况下*/  
.s_ab_v,
.s_ab_vertical_middle{
    top:50%;
    bottom: 50%;
    -webkit-transform: translate(0%,-50%);
    -moz-transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%);
    -o-transform: translate(0%,-50%);
    transform: translate(0%,-50%);
    position: absolute;
}