设置容器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 来控制主轴对齐。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

立即学习“前端免费学习笔记（深入）”；

.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 还是块级元素，都能正确居中。

基本上就这些，不复杂但容易忽略细节。