垂直对齐是一项非常重要的任务，在许多不同的Web设计场景下都必须考虑。使用 CSS 的 vertical-align 属性，可以完成各种对齐任务，包括水平垂直居中对齐。在本文中，我们将详细介绍使用 vertical-align 属性实现水平垂直居中对齐的方法，以及如何在不同场景下使用该属性。

什么是 Vertical-Align 属性？

Vertical-Align 是 CSS 属性，常常用于控制行内元素或表格单元格的垂直对齐方式。该属性仅适用于行内或表格单元格元素。不仅如此，该属性仅适用于在垂直方向上受到行高度限制的元素。

“vertical-align” 属性的值

Vertical-Align 属性有一系列合法的值：

- bottom：该元素将垂直对齐到行的底部。如果该行没有其他行内元素，则 bottom 值与 baseline 值效果相同。

- middle：该元素垂直对齐到行的中部。

- top：该元素将垂直对齐到行的顶部。

- baseline：该元素通过其底部边缘与该行的基线对齐，即“基准”线高度。如果在同一行上没有其他行内元素，此效果将与 bottom 效果相同。

- sub：该元素根据父元素的基线向下垂直偏移，将字体大小的一半作为偏移量。

- super：该元素根据父元素的基线向上垂直偏移，将字体大小的一半作为偏移量。

- text-top：该元素根据当前字体大小的顶部与基线对齐。如果没有其他行内元素，则 text-top 效果与 top 效果相同。

- text-bottom：该元素根据当前字体大小的底部与基线对齐。如果没有其他行内元素，则 text-bottom 效果与 bottom 效果相同。

- %：可以用百分比表示的任何垂直偏移量。对于行内元素，使用此值将覆盖所有其他垂直对齐属性。

一般来说，我们应该使用 top、middle、bottom 或 baseline 属性值。sub 和 super 属性值主要用于科学或数学符号，而 text-top 和 text-bottom 值则用于处理内联图像等。

如何使用 vertical-align 实现 Waterfall Grid

维护瀑布流（waterfall grid）的自动排序和对齐非常重要。考虑下面这个例子：

```html