要让按钮在容器中水平垂直居中，需将父容器设置为弹性盒子并正确配置对齐属性。首先，父容器必须启用 Flexbox 布局：display: flex；接着，使用 justify-content: center 实现主轴（默认横轴）上的水平居中；再通过 align-items: center 实现交叉轴（默认纵轴）上的垂直居中。完整代码示例如下：.container { display: flex; justify-content: center; align-items: center; height: 100vh; }，其中 height: 100vh 确保容器有足够高度，否则垂直居中效果无法体现。配合 HTML 结构 <div class="container"><button>居中按钮</button></div>，即可实现按钮的精准居中。
在使用CSS弹性盒子（Flexbox）布局时，如果按钮无法实现水平垂直居中，通常是因为容器的 justify-content 和 align-items 属性没有正确设置。这两个属性分别控制主轴和交叉轴上的对齐方式，配合使用才能让子元素（如按钮）真正居中。
确保父容器是弹性盒子
要使用 justify-content 和 align-items，首先要确认父元素启用了 Flexbox 布局：
display: flex;使用 justify-content 控制水平居中
justify-content 用于设置主轴（默认是横轴）上的对齐方式。让内容水平居中需设置：
justify-content: center;使用 align-items 控制垂直居中
align-items 控制交叉轴（默认是纵轴）上的对齐方式。实现垂直居中使用：
立即学习“前端免费学习笔记（深入）”；
align-items: center;
完整示例代码
以下是一个让按钮在容器中水平垂直居中的标准写法：
.container {display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 确保容器有高度 */
}
HTML结构：
<div class="container"><button>居中按钮</button>
</div>
注意：若容器没有明确高度（如 height 为 0），即使设置了 align-items: center，也无法看到垂直居中效果。确保父容器有足够高度或明确尺寸。
基本上就这些。只要开启 flex 布局，并同时设置 justify-content 和 align-items 为 center，按钮就能稳稳地居中显示。
