css垂直居中实用技巧 |css菜单栏在线

/* 1.使用Flex实现垂直居中 */
.container {
display: flex;
align-items: center;
justify-content: center;
}
/* 2.使用绝对定位实现垂直居中 */
.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* 3.使用table实现垂直居中 */
.container {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
/* 4.使用line-height实现单行文本垂直居中 */
.container {
line-height: 200px;
}
/* 5.使用calc函数实现垂直居中 */
.container {
height: 100vh;
position: relative;
}
.child {
position: absolute;
top: calc(50% - 50px);
}

在实际开发中，大家需要根据具体的场景选择合适的垂直居中方法。同时，考虑到兼容性问题，大家也需要多做测试和兼容性调整。