水平垂直居中总结
html结构
<div class="container">
<div class="box">text</div>
</div>
一 box 为行内元素时，
水平居中
方案：父元素设置 text-align：center；
垂直居中
方案一：
父元素设置 display：table-cell；vertical-align：middle；
子元素设置：display：inline or inline-block；
方案二：
子元素设置：line-height：父元素的height；
三 box为块级元素时，水平垂直居中
方案一：水平居中，父元素设置 margin：0 auto；
方案二：父相子绝， 子元素设置left：0；right：0；top：0；bottom：0；margin：0 auto；
方案三：父子都设置box-sizing：border-box；利用子元素的margin-left或者父元素的padding-left：（父宽 - 子宽）/ 2;
方案四：利用自元素，left：50%；top：50%；transform:translate(-子元素宽，-子元素的高);
方案五：flex布局；