css3 垂直布局 |css怎么鼠标点击后显示图片

/* 方法一：使用flexbox布局 */
.container {
display: flex;
align-items: center;
justify-content: center; /* 可根据具体需求进行调整 */
}
/* 方法二：使用table布局 */
.container {
display: table;
height: 100%; /* 确保容器高度为100% */
}
.content {
display: table-cell;
vertical-align: middle;
}
/* 方法三：使用absolute定位 */
.container {
position: relative;
height: 100%; /* 确保容器高度为100% */
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* 方法四：使用grid布局 */
.container {
display: grid;
height: 100%; /* 确保容器高度为100% */
place-items: center center;
}

以上是实现垂直布局的四种方式，每种方式都有其优缺点，大家可以根据具体需求进行选择。同时，在使用CSS3垂直布局时，大家也需要注意兼容性问题，确保网页在各种浏览器和设备上都能正常显示。