vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
- 默认。元素放置在父元素的基线上。
- vertical-align仅仅对行内元素有效
使用场景：
- 内联元素
- 单元格
td/table-cell
拓展：
- a.水平居中
1. 文字 (text-align: center;)
2. 块级元素 (margin-left: auto; margin-right: auto;)
3. position: absolute; left: 50%; transform: translate(-50%, 0);
4. display: flex; justify-content: center;
- b.垂直居中
1. 单元格 (display: table-cell; vertical-align: middle;)
2. position: absolute; transform: translate(0, -50%)
3. display: flex; align-items: center;
4. 文字 (line-height: 所在盒子高度)
- c.垂直水平居中
1. flex + align-items + justify-content
2. position + transform 50%(视图居中 + margin 50%)
3. table-cell + vertical-align + text-align
4. display: grid; margin: auto
