css 实现盒子水平居中、垂直居中和水平垂直居中

水平居中
方法一
给子盒子添加 margin: 0 auto； 只适用于子盒子有宽的时候。

方法二
父盒子 设置 text-align: center； 子盒子 设置 display:inline-block;

方法三
父盒子 设置 position:absolute; 子盒子 设置 position:absolute; top: 0; left: 50%; margin-left:-子盒子自身一半的大小。或者通过transform:translate(-50%,0%); 通过使用margin-left只适用于子盒子有宽高的时候。

方法五
给父盒子设定display:flex; justify-content: center； 子元素水平排列方式。

垂直居中
方法一
父盒子设定 position:relative 子盒子设定 position:absolute;left:0;top:50%;margin-top:子盒子自身高度的一半。只适用于子盒子有宽度和高度的时候。transform：translate（0%，-50%）；

方法二
父盒子 display：flex align-items：center；

水平垂直居中
方法一
父盒子设定position: relative； 子盒子 position:absolute; left:50%;top:50%;margin-top:-高度的一半。margin-left:-宽度的一半。

方法二
父元素设定position:relative; 子元素设定position：absolute；left：0；right：0；top：0；bottom：0；margin：auto；

方法三
子盒子 position：relative；left：50%；top：50%；transform：translate（-50%，-50%）；

方法四
父盒子设定 display：flex；justify-content：center；align-items：center；

方法五
子盒子设定position：relative；display：table-cell；text-align：center；vertical-align：middle；