关于盒子垂直水平居中的方法

      关于怎么使一个盒子垂直水平居中是编写代码时比较常见的一种问题，以下是我整理出来的几种方法：

1、设置position与transform

       通过设置position为absolute或者fixed，设置top、left为50%（即向下向右偏移position为relative的父容器或者body的宽高的50%），然后设置tansform： translate(-50%,-50%) （向上向左偏移以自身宽高为基准的50%）。

2、flex弹性盒子

（1）盒子样式

（2）布局结构

        通过设置父元素display为flex，然后通过justify-content：center；【将子元素水平居中】，align-items：center；【将子元素垂直居中】，使用该方法需要给父元素设置宽高。

3、display：table-cell

（1）盒子样式

（2）布局结构

        通过display：table-cell将容器设置为单元格，vertical-align：middle；【将单元格内元素垂直居中】，text-align：center；【将单元格内容水平居中】。子元素设置display：inline-block；是因为text-align属性，只适应于行内元素以及inline-block元素。

4、绝对定位后设置top、right、bottom、left全为0

        绝对定位后设置top、right、bottom、left为0，通过margin：auto自适应边距达到居中效果，该方法需要设置居中元素的宽高。