多种垂直居中的方法

使用 Flexbox：将容器设置为 display: flex，然后使用 align-items 和 justify-content 属性来居中元素。

使用表格布局：将元素放在一个表格单元格中，并将单元格的 vertical-align 属性设置为 middle。

使用 position 和 transform：将元素的 position 属性设置为 absolute 或 fixed，然后使用 transform 属性和 translate() 方法来居中元素。

使用 line-height：将元素的 line-height 属性设置为容器的高度，然后将元素的 display 属性设置为 inline-block，以实现文字或图标的垂直居中。

使用 CSS Grid：将容器设置为 display: grid，然后使用 grid-template-rows 和 grid-template-columns 属性来定义网格布局，并使用 justify-content 和 align-items 属性来居中元素。

使用 JavaScript：使用 JavaScript 计算元素和容器的高度，并通过设置元素的 margin-top 和 margin-bottom 来实现垂直居中