设置容器display: flex；2. 使用align-items: center实现垂直居中；3. 结合justify-content: center可同时水平居中；4. 确保父容器有明确高度。完整方案轻松实现按钮在容器中垂直居中。
在使用 CSS Flexbox 布局时，让按钮垂直居中是一个常见需求。通过 align-items: center 和 Flex 容器的基本设置，可以轻松实现这一效果。
1. 设置容器为 Flex 布局
要让子元素（如按钮）在父容器中垂直居中，首先需要将父容器的 display 属性设为 flex。这是使用 Flexbox 的前提。
.container { display: flex; }2. 使用 align-items: center 实现垂直居中
align-items 控制的是交叉轴（cross axis）上的对齐方式。在默认的行方向（flex-direction: row）下，交叉轴是垂直方向，因此设置 align-items: center 即可使子元素在垂直方向上居中。
.container { display: flex; align-items: center; height: 200px; /* 确保容器有高度以便看到居中效果 */ }3. 完整示例：按钮垂直居中
假设你想让一个按钮在父容器中垂直且水平居中，还可以结合 justify-content 来控制主轴对齐。
立即学习“前端免费学习笔记（深入）”；
.container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ height: 300px; border: 1px solid #ccc; }
.button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; }
HTML 结构：
4. 注意事项
确保父容器有明确的高度，否则 align-items: center 可能无法表现出预期的居中效果。Flexbox 的居中不依赖子元素的大小，无论按钮是 inline-block 还是块级元素，都能正确居中。
基本上就这些，不复杂但容易忽略细节。
