一、基本技巧
    1、水平居中怎么实现
    （1）块级元素直接设置水平margin为自动，让浏览器计算，便可居中
    （2）行内元素，将其父容器设置text-align属性为center。
    行内元素设置垂直外边距没有效果，水平外边距有效
    2、垂直居中
    （1）行内元素，给父容器设置line-height
    二、垂直居中
    思路：
    盒子宽高是否已知：
    1、已知盒子宽高
    （1）绝对定位top和left都50%
    （2）利用margin-left和margin-top负值进行位移将盒子移到父容器中心
    2、未知盒子宽高
    （1）绝对定位top和left为50%
    （2）利用css3中transform：translate（-50%，-50%）将盒子移到父容器中心
    （3）利用定位加margin：auto，将top，left，right和bottom设置为0，这样盒子实际占满了父容器，再将盒子margin设置为auto，浏览器自动计算外边距，让盒子水平垂直居中。
    （4）flex布局法，直接省事，主轴和侧轴都设为居中。
    （5）grid栅格布局