CSS——总结、小技巧

1、在使用绝对定位时，同时设置left、right为0，margin为auto，可以做到水平居中，同时设置top、bottom为0，margin为auto，可以设置垂直居中

2、实现垂直居中，可以利用 transform 属性

.canvas-box{
  position: absolute;
  text-align: center;
  line-height: 48rpx;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3、justify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

4、当出现inline-block元素水平对齐不在同一直线上问题时，

可以使用 vertical-align: bottom; 元素解决问题