css - 水平居中，垂直居中，水平垂直居中的样式

1.水平定位

(1)行内元素: text-align: center

(2)块级元素: margin: 0 auto

(3) 子： position:absolute   left:50%  transform:translateX(-50%)   父： position：relative

(4) 父： display: flex;   justify-content: center;

2.垂直定位

(1) 父： display: table-cell;  vertical-align: middle;

(2) 父： display:flex + align-items: center

(3) 子： position:absolute  top: 50%;  transform: translateY(-50%);      父： position：relative

（4）设置line-height 等于height

3.水平垂直居中

1. 子元素有宽度  width:50px;

A:  子： position: absolute;   left: 50%;  top: 50%; margin: -25px 0 0 -25px;（去除掉子元素自带的宽度-对半）

父： position：relative

B:  子：position: absolute;  left: 0;  right: 0;  top: 0;   bottom: 0;  margin: auto;

父： position：relative

1.  子元素没有宽度

子 ： position: absolute;   left: 50%;  top: 50%;  transform: translate(-50%, -50%);

父： position：relative

（3） 父：display: flex;   justify-content: center;  align-items: center;