要让按钮在容器中完全居中，需同时使用 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：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

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

<div class="container">
  <button>居中按钮</button>
</div>

2. 常见问题排查

如果仍不居中，检查以下几点：

• 父元素是否有明确尺寸：align-items 在垂直方向居中依赖于容器有高度。若父容器高度为 0，就看不出居中效果。
• 是否有外边距或填充干扰：检查按钮或父容器是否设置了 margin 或 padding，可能影响布局表现。
• 是否被其他样式覆盖：使用浏览器开发者工具检查最终生效的样式，确认 flex 相关属性未被重置。

3. 单方向居中场景

根据需求可单独使用其中一个属性：

• 仅水平居中：justify-content: center
• 仅垂直居中：align-items: center

基本上就这些。只要父容器是 flex，且设置了正确的对齐属性，按钮就能顺利居中。关键是两个属性配合使用，并确保容器有足够空间显示居中效果。