使用 Flexbox 居中按钮只需设置父容器 display: flex、justify-content: center 和 align-items: center，配合 height: 100vh 可实现全屏居中，适用于登录页等需居中布局的场景。
使用 CSS Flexbox 实现按钮的水平垂直居中非常简单，只需要将父容器设置为 flex 布局，并应用两个关键属性即可。
基本结构
假设你的 HTML 结构如下：
<div class="container"><button class="btn">居中按钮</button>
</div>
Flexbox 居中样式
给外层容器设置 Flexbox 样式，让按钮在其中水平和垂直居中：
.container {display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.btn {
padding: 10px 20px;
font-size: 16px;
}
说明：
立即学习“前端免费学习笔记（深入）”；
- display: flex：开启 Flexbox 布局
- justify-content: center：水平居中子元素
- align-items: center：垂直居中子元素
- height: 100vh：使容器占满视口高度，便于看到垂直居中效果
适用场景
这种写法适合模态框、登录页、欢迎页等需要内容居中的界面。只要父容器有明确尺寸（如固定高度或全屏），按钮就能完美居中。
基本上就这些，不复杂但很实用。
