水平垂直居中6种

1，flex布局在父元素设置样式
father{display:flex;justify-content:center;align-items:center;}
2，flex布局在子元素上设置样式
father{display:flex} children{margin:auto}
3，flex布局在子元素上设置样式
.father{display:flex}
.children{align-self:center;margin:auto;}
4,定位,margin
father{position:relative;}
.children{position:absolute;top:0;left:0;right:0;bottom:0;margin auto;}
5,定位,margin加transfrom属性
.father{position:relative};
children{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
6设置表格样式定位
father{display:table-cell;vertical-align:center;text-align:center;} children{display:inline-block}