要让按钮在容器中水平垂直居中，需将父容器设置为弹性盒子并正确配置对齐属性。首先，父容器必须启用 flexbox 布局：display: flex；接着，使用 justify-content: center 实现主轴（默认横轴）上的水平居中；再通过 align-items: center 实现交叉轴（默认纵轴）上的垂直居中。完整代码示例如下：.container { display: flex; justify-content: center; align-items: center; height: 100vh; }，其中 height: 100vh 确保容器有足够高度，否则垂直居中效果无法体现。配合 html 结构 居中按钮，即可实现按钮的精准居中。

在使用CSS弹性盒子（Flexbox）布局时，如果按钮无法实现水平垂直居中，通常是因为容器的 justify-content 和 align-items 属性没有正确设置。这两个属性分别控制主轴和交叉轴上的对齐方式，配合使用才能让子元素（如按钮）真正居中。

确保父容器是弹性盒子

要使用 justify-content 和 align-items，首先要确认父元素启用了 Flexbox 布局：

display: flex;

使用 justify-content 控制水平居中

justify-content 用于设置主轴（默认是横轴）上的对齐方式。让内容水平居中需设置：

justify-content: center;

使用 align-items 控制垂直居中

align-items 控制交叉轴（默认是纵轴）上的对齐方式。实现垂直居中使用：

度加AI

度加AI官网入口，百度官方 AIGC 创作平台，支持 AI 成片、AI 生文、数字人、声音克隆、配音字幕与智能剪辑等在线创作能力。

下载

align-items: center;

完整示例代码

以下是一个让按钮在容器中水平垂直居中的标准写法：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 确保容器有高度 */
}

HTML结构：

  居中按钮

注意：若容器没有明确高度（如 height 为 0），即使设置了 align-items: center，也无法看到垂直居中效果。确保父容器有足够高度或明确尺寸。

基本上就这些。只要开启 flex 布局，并同时设置 justify-content 和 align-items 为 center，按钮就能稳稳地居中显示。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！