要让按钮在容器中完全居中，需同时使用 justify-content: center 和 align-items: center。首先确保父容器设置 display: flex，并具有明确高度（如 height: 100vh），以实现水平和垂直居中。若未生效，检查父容器尺寸、margin/padding 干扰及样式是否被覆盖。仅需单方向居中时可单独使用对应属性。正确配置后按钮即可居中显示。
在使用 Flex 布局时，如果按钮无法居中，通常是因为只设置了单个方向的对齐方式。要让按钮在容器中完全居中（水平和垂直），需要同时使用 justify-content 和 align-items 两个属性。
1. 确保父容器是 flex 布局
首先，按钮的父元素必须设置为 display: flex，否则 justify-content 和 align-items 不会生效。
示例 CSS：
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 示例：让容器占满视口高度，便于看到垂直居中效果 */
}
对应 HTML：
立即学习“前端免费学习笔记（深入）”；
2. 常见问题排查
如果仍不居中，检查以下几点：
- 父元素是否有明确尺寸：align-items 在垂直方向居中依赖于容器有高度。若父容器高度为 0，就看不出居中效果。
- 是否有外边距或填充干扰：检查按钮或父容器是否设置了 margin 或 padding，可能影响布局表现。
- 是否被其他样式覆盖：使用浏览器开发者工具检查最终生效的样式，确认 flex 相关属性未被重置。
3. 单方向居中场景
根据需求可单独使用其中一个属性：
- 仅水平居中：
justify-content: center - 仅垂直居中：
align-items: center
基本上就这些。只要父容器是 flex，且设置了正确的对齐属性，按钮就能顺利居中。关键是两个属性配合使用，并确保容器有足够空间显示居中效果。
