让一个盒子垂直水平居中的几种方法？

相信大家在网上都多多少少看到过一下文章，但是大多数写的代码包括HTML 的结构和样式挤在一起，比较杂乱，不方便阅读，所以我自己整理了一份相对比较容易阅读的文档，希望能对大家有所帮助！

 

1. 利用定位

给父元素设置相对定位，子元素设置绝对定位，子元素设置 top:50%，left:50%，margin-top子元素高的一半，margin-left，子元素宽的一半

2. 利用transform

父元素设置相对定位，子元素设置绝对定位，子元素设置  top:50%，left:50%， transform-translate（-50%  -50%）

3. 利用margin:auto

父元素设置相对定位，子元素设置绝对定位，子元素设置 top:0，left:0，button:0，right:0，margin：auto

4. 利用 display：table-cell

父元素设置 display：table-cell，vertical-align: middle, text-align:center

子元素设置 display：inline-block

5. 利用 display：flex 布局

父元素设置 display：flex，justify-content:center,  align-item:center

6. 计算子元素与父元素之间的空间距离

父元素 宽高500px，子元素宽高100px， 子元素设置  margin-top：200px，margin-left：200px