如何让div在父元素中水平且垂直居中
实现效果：
利用定位margin取值让子元素居中 :
margin取值应为子元素宽高的一半（margin的取值可以为负值，但padding显然不行）， 缺点是 必须知道子元素的宽高具体大小且需要计算，当子元素的大小被修改后对应的margin值也需要修改否则达不到剧中的效果，从而引导我们使用更方便快捷的方法。
利用定位与transform实现垂直水平居中 ：
transform：translate（-50%，-50%） 第一个-50%是指x轴方向向左位移 子元素本身 宽的百分之50，而第二个-50%是指元素在y轴方向向上平移 子元素本身 高的百分之50。
二者的原理是相同的都是在加了 left：50% 与 top：50% 后再减去盒子宽高的一半来实现水平垂直居中。
给父元素添加display：flex；让它变成弹性盒，在利用justify-content: center;与 align-items: center;，让子元素在主轴与交叉轴（纵轴）方向居中。 缺点是 在网页端弹性盒因为兼容问题一般不被经常使用。
设置一个元素在一个容器中垂直居中，必须更改默认的 display 属性值为 inline-block; 并加上同级元素（标尺）（同级元素[标尺]样式设置为 vertical-align:middle;width:0;height:100%;display:inline-block; ）
三个条件：
原理类似于利用弹性布局，将父元素转换为网格元素再利用 ustify-items：center （内容在单元格内的水平对齐方式），和 align-items：center； （内容在单元格内垂直对齐方式） place-items 为复合写法，相当于父元素为一个一行一列的单元格而box1为它单元格中的元素。（其实很利用 place-content 也能做到原理还没搞懂...）
