按钮水平居中需父容器设display: flex和justify-content: center；垂直居中还需align-items: center及明确高度；两者结合可实现完全居中，右对齐用justify-content: flex-end。
按钮在父容器中水平居中用 justify-content: center
Flex 布局里，justify-content 控制主轴（默认是水平方向）上的对齐方式。按钮要水平居中，前提是它的父元素已设为 display: flex，且子元素是按钮本身。
常见错误是只给按钮加 flex 属性，或者忘了给父容器设 display: flex —— 这样什么都不会发生。
- 父容器必须设置
display: flex - 加上
justify-content: center即可让按钮水平居中 - 如果父容器宽度不够或有
flex-wrap: wrap，可能影响效果
.btn-container {
display: flex;
justify-content: center;
}按钮垂直居中需要 align-items: center
仅靠 justify-content 只能管水平方向；垂直居中得看交叉轴，也就是 align-items。它默认对齐的是容器的 height，所以父容器要有明确高度（比如 height: 100vh 或固定值），否则按钮会“贴顶”。
- 父容器需有高度定义，否则
align-items: center看不出效果 -
align-items对单个按钮有效；多个按钮时会整体垂直居中 - 若按钮内容有行高、内边距等，可能造成视觉偏差，建议检查
box-sizing: border-box
.btn-container {
display: flex;
align-items: center;
height: 200px; /* 必须有高度 */
}按钮同时水平+垂直居中：两个属性一起用
这是最常用的居中组合。只要父容器尺寸可控，justify-content: center 和 align-items: center 同时设置，按钮就会真正居中。
立即学习“前端免费学习笔记（深入）”；
- 不需要额外 wrapper 元素，一行 CSS 就搞定
- 注意父容器不要有 padding 干扰计算，或用
box-sizing: border-box统一处理 - 如果按钮是
inline元素（如没设display: block的<a></a>），flex 会自动将其转为 flex item，一般不用额外处理
.btn-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}按钮右对齐或左对齐：用 justify-content 的其他值
除了 center，justify-content 还支持 flex-start（左对齐）、flex-end（右对齐）、space-between（两端对齐，适合多个按钮）等值。它们只在主轴方向生效，和 flex-direction 设置有关。
- 默认
flex-direction: row，所以flex-start= 左对齐，flex-end= 右对齐 - 如果改成
flex-direction: column，那flex-start就变成顶部对齐了 -
space-between在多个按钮间平均分配空白，但首尾按钮紧贴容器边缘
.btn-container {
display: flex;
justify-content: flex-end; /* 按钮靠右 */
}实际用的时候，最容易被忽略的是父容器是否设置了高度、是否意外触发了 min-width 或 white-space 导致布局错位，尤其是按钮嵌套在表单或导航栏里时。
