多种垂直居中的方法没有上限

使用flexbox布局，将父元素设置为display:flex; align-items:center; justify-content:center;即可垂直居中子元素。

使用绝对定位，将子元素的top和left属性设置为50%，再通过transform:translate(-50%,-50%)将其居中。

使用表格布局，将父元素设置为display:table;，子元素设置为display:table-cell; vertical-align:middle;即可垂直居中子元素。

使用line-height属性，将父元素的line-height设置为与高度相同的值，再将子元素的line-height设置为1即可实现垂直居中。

使用grid布局，将父元素设置为display:grid;，将子元素放置在中心格子即可垂直居中。

使用CSS3的transform属性，将子元素的translateY属性设置为-50%，即可将其垂直居中。

使用absolute + margin，将子元素设置为position:absolute;，再将其上下左右的margin设置为auto即可实现垂直居中。

使用JavaScript，通过计算父元素和子元素的高度，将子元素的marginTop设置为父元素高度和子元素高度差的一半，即可垂直居中