vertical-align: center垂直对齐

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