答案：通过设置display: flex，结合align-items和justify-content实现垂直水平居中。具体为：1. 垂直居中用align-items: center；2. 完全居中加justify-content: center；3. 多元素纵向居中使用flex-direction: column并配合justify-content与align-items。
要使用 CSS Flex 实现垂直居中布局，关键在于将父容器设置为 Flex 容器，并利用 align-items 和 justify-content 属性控制子元素在交叉轴和主轴上的对齐方式。
1. 基本垂直居中（单行元素）
如果只想让子元素在容器中垂直居中（沿交叉轴），可以使用 align-items: center。
.container {
display: flex;
align-items: center; /* 垂直居中 */
height: 300px; /* 需要有高度才能看到效果 */
}
这个方法适用于文本、按钮等单行内容的垂直居中。
2. 完全居中（垂直 + 水平）
如果需要同时实现垂直和水平居中，加上 justify-content: center 即可。
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 300px;
width: 100%;
}
这种方法适合模态框、登录框、提示弹窗等需要在页面正中间显示的内容。
3. 多个子元素垂直居中排列
当有多个子项时，默认会横向排列。若希望它们纵向堆叠并各自垂直居中，可以改变主轴方向。
.container {
display: flex;
flex-direction: column;
align-items: center; /* 水平居中（在纵轴布局中变为水平对齐） */
justify-content: center; /* 垂直居中 */
height: 400px;
}
这种布局常用于移动端竖屏内容展示或列表项的居中排布。
基本上就这些。只要记住 align-items 控制交叉轴（通常为垂直方向），justify-content 控制主轴方向，再根据需要调整 flex-direction，就能灵活实现各种居中效果。
