让子元素在父元素盒子水平垂直居中显示的办法

1、利用弹性盒的思路

思路：一个父盒子、一个子盒子，给父盒子加上display：flex；让父盒子变成弹性盒，然后在子盒子的css属性中加上margin：auto；就可以让子盒子水平居中显示。

重点：1、父盒子是弹性盒  2、子盒子加margin：auto；

代码演示：

 结果：

 

2、利用绝对定位的思路

思路：一个父盒子、一个子盒子，首先让父盒子加上position：relative；变相对定位，让子盒子绝对定位（加position：absolute），top值设置50%，left设置50%，这个时候子盒子在下面“1”这个位置：

 在“1”这个位置还不是正中间，正中间是要子盒子再往左上角返回自身盒子大小的一半即可，图示：（原来在盒子往上面平移自身的一半，再往左平移自身的一半就是父盒子的正中间）

 代码演示：

 结果：

 以上就是让子盒子在父盒子中间显示的方法，第二种绝对定位的方法也可以用在没有父盒子的情况下。