让子盒子在父盒子中垂直居中的七个方法

一、用padding实现

1.padding-top = (父盒子的高度 - 子盒子的高度) / 2
2.padding-left = (父盒子的宽度 - 子盒子的宽度) / 2
3.由于padding会撑大盒子，所以父盒子的宽高要减去对应的padding值

二、用margin实现

1.margin-top = (父盒子的高度 - 子盒子的高度) / 2
2.margin-left = (父盒子的宽度 - 子盒子的宽度) / 2
3.子盒子加margin-top会使父盒子产生塌陷，需要解决塌陷问题

三、text-align+margin

1.先利用text-align:center;时盒子水平居中。
2.由于text-align不能是块级元素水平居中，所以要对子盒子进行类型转换。
3.再利用margin实现垂直居中

四、利用定位

五、利用定位-auto

1.利用子绝父相定位，再使子盒子上下左右的距离都为0
2.margin:auto;一般情况下只能使盒子水平居中，但当子盒子上下左右距离都为0，此时可实现盒子垂直水平居中的效果。
3.且此时，无论父盒子和子盒子宽高如何改变，子盒子都是垂直居中的。

六、利用定位+translate

1.利用定位让子盒子右移父亲宽度的一半，下移父亲高度的一半。
2.再用translate左移自身宽度的一半，上移自身宽度的一半。

七、flex布局实现

1.让子项在主轴上居中，在侧轴上居中就行了。

分享完毕，不妥之处，敬请批评指正，谢谢大家！