水平居中：

1. margin: 0 auto;（适用于块级元素，且必须设置了宽度）
2. text-align: center;（适用于行内元素、行内-块级元素）
3. position: absolute
   left: 50%;
   transform: translateX(-50%);（适用于定位元素，且没有设置宽度）
4. display: flex;
   justify-content: center;（适用flex布局）

垂直居中：

1. line-height:父元素高度;（适用于单行行内元素）
2. display: table-cell;
   vertical-align:middle;（适用于多行行内元素）
3. position: absolute
   top: 50%;
   transform: translateY(-50%);（适用于定位元素，且没有设置高度）
4. display: flex;
   align-items: center;（适用flex布局）

水平垂直居中：

1. position: absolute
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);（适用于定位元素，且没有设置宽高）
2. display: flex;
   align-items: center;
   justify-content: center;（适用flex布局）