让元素水平垂直居中的四种方法

一、使用flex弹性布局

二、使用transform变形

将子元素的宽和高设置为百分数，如宽设置为 80%，则需要向 X 轴偏移 10%；那么 translateX 为10/80 = 0.125，即 12.5%；如果高设置为 60%，则需要向 Y 轴偏移 20%，那么 translateY 为20/60 = 33%，即子元素需要设置 transfrom:translate(12.5%,33%)。

三、使用position定位

将父元素设置为 positon:fixed，然后上下左右都为 0；使其填满整个屏幕；
子元素也设置为 positon:fixed，然后上下左右都为 0；margin 设置为 auto，实现水平垂直居中。

四、transform 与 position 结合

将父元素设置为 positon:fixed，然后上下左右都为 0；使其填满整个屏幕
子元素也设置为 positon:fixed，然后上下各设为 50%；即位置到达中心点，但是元素也有高宽度，所以整体就偏移了，应当上下都回退25%的距离，即设置为 transform:translate(-50%,-50%)。