8种垂直居中方法，全面解析CSS布局技巧

使用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设置为父元素高度和子元素高度差的一半，即可垂直居中。