布局：

1、两边固定中间自适应

flex布局（如果对flex不了解，可点击打开链接学习）

（1）将父元素box设为display:flex

（2）左右固定宽度 

（3）中间flex：1

2、水平垂直居中：详细参考https://www.cnblogs.com/xiaoxueer/p/11849997.html

（1）定位：

   父子元素定位+偏移

    position: absolute

    left: 50%;

    top:50%;

    transform: translate(-50%,-50%);

（2）flex：父元素弹性盒、弹性盒内子元素 水平的主轴（main axis）和垂直的交叉轴（cross axis）居中

       display: flex;

      align-items: center;//定义项目在交叉轴上如何对齐。

      justify-content: center;//定义了项目在主轴上的对齐方式。