水平垂直居中的几种方式

一、flex

①父元素样式为：
.abc{
    display: flex;
    justify-content: center;
    align-items: center;
}

②父元素样式设置为display:flex
  子元素样式设置为margin: auto

二、absolute

　父元素样式设置为display:relative
  子元素样式设置为
{
　　position:absolute;
　　top: 50%;left: 50%;
　　transform:translate(-50%, -50%)
}
当使用：top: 50%;left: 50%;，子元素左上角以父元素左上角为坐标原点，向右下平移父元素长宽一半的距离；即子元素左上角处于父元素中心位置。
即子元素未居中，transform:translate(-50%, -50%)刚好解决上述问题；transform是以元素本身尺寸进行移动；即子元素中心向左上移动自身长宽一半距离，刚好处于父元素中心位置。