因为 .boton 作用于 <input type="submit"> 这类不可嵌套的行内替换元素，display: flex 无效且 justify-content 无子元素可居中；正确做法是 display: block; margin: 0 auto; width: fit-content，确保块级元素有明确宽度才能触发自动外边距居中。
为什么 .boton 加 display: flex 无法居中按钮自身？
因为 .boton 是作用在 <input type="submit"> 上的类，而 <input> 是自封闭、不可嵌套内容的行内元素。你写的 justify-content: center 是给容器用的，不是给单个控件用的——它没子元素可居中，也没 flex 容器上下文可响应。
display: block + margin: 0 auto 为什么必须配 width: fit-content？
块级元素默认占满父容器宽度，margin: auto 只有在宽度明确小于父容器时才生效：
-
width: 100%→ 左右 margin 都为 0，居中失效 -
width: fit-content→ 按按钮文字实际宽度收缩，margin: 0 auto才能分配左右空白 - 不设 width 或设成
auto（默认值）→ 在多数浏览器中等效于width: 100%，依然不居中
要不要用 text-align: center 在父容器上？
不要。表单里通常还有 <label> 和其他 <input>，全局设 text-align: center 会把所有文本都居中，破坏原有左对齐布局。只针对按钮本身操作，才是最小侵入解法：
- 改
.boton类，不动.formulario或.campo - 避免用
flex: 1或width: 100%覆盖原有 SCSS 混入逻辑 - 若需响应式收缩，用
max-width: 90%+ 媒体查询，而不是靠父容器对齐
<button type="submit"> 和 <input type="submit"> 居中写法一致吗？
一致。两者都是替换式表单控件，CSS 行为相同：
立即学习“前端免费学习笔记（深入）”；
- 都默认 inline 级别
- 都支持
display: block+margin: 0 auto+width: fit-content - 区别只在语义和内部结构：
<button>可含 HTML 内容，<input>只能靠value属性设文本
真正容易被忽略的是：SCSS 中如果用了 @include m.boton() 这类混入，必须确认它没悄悄覆盖 display 或 width —— 优先在混入调用后显式重写这两项，而不是试图在混入内部改。
