垂直居中

1. display: table, vertical-align: middle

2. display: flex, align-self: center

3. position, top: 50%, margin-top: -height/2

4. before

5. transform: translateY(-50%)

6. line-height: height+childHeight/2, display: inline

水平居中

1. text-align: center

2. margin: 0 auto

3. position

4. transform: translateX(-50%)

5. display: flex

垂直水平居中

1. display: table, text-align: center, vertical-align: middle

2. display: flex, align-self: center, justify-content: center, align-items: center

3. position, top: 50%, left: 50%, margin-top: -height/2, margin-left: -width/2

4. before

5. transform: translateY(-50%)

6. line-height: height+childHeight/2, display: inline