水平垂直居中多种实现方式（html+css）

html代码：

必须设宽高:

方法一：利用绝对定位，设置 left: 50%  和 top: 50%  现将子元素左上角移到父元素中心位置，然后再通过 margin来调整子元素的中心点到父元素的中心。

方法二：利用绝对定位，子元素所有方向都为 0 ，将 margin  设置为 auto ，由于宽高固定，对应方向实现平分。

可以不设宽高:

方法一：利用绝对定位，设置 left: 50%  和 top: 50%  现将子元素左上角移到父元素中心位置，然后再通过 translate  来调整子元素的中心点到父元素的中心。该方法可以不定宽高。

方法二：给父容器设置为弹性盒子，再根据设置子元素在主轴和交叉轴的起始位置来实现水平垂直居中。此方法为最经典也最简便的一种。

方法三：给父容器设置为弹性盒子，再给子元素设置margin值为auto。