如何在不影响其他元素的前提下居中表单的input按钮？

问题背景 #

需要将表单中的提交按钮（<input type="submit">）居中对齐，项目包含多个SCSS文件，只能调整提供的SCSS代码，且不能影响表单内其他元素。之前尝试以下代码无效，按钮仍左对齐：

display: flex; 
justify-content: space-between; 
align-items: center;

相关代码示例 #

SCSS代码

.formulario {
    margin-top: 5rem;
    width: 100%;
}

.campo {
    display: flex;
    margin-bottom: 2rem;
    align-items: center;
    label {
        flex: 0 0 10rem;
    }
    input {
        flex: 1;
        border: none;
        padding: calc(v.$separacion / 4);
        border-radius: 1rem;

        &:disabled {
            background-color: lighten(v.$negro, 30%);
            color: v.$blanco;
            cursor: not-allowed;
        }
    }
}

.boton {
    @include m.boton(v.$azul, v.$blanco);
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.boton-eliminar {
    @include m.boton(v.$rojo, v.$blanco);
}

HTML代码

<h1 class="nombre-pagina">LOGIN</h1>
<p class="descripcion-pagina">Inicia sesion con tus datos</p>

<form class="formulario" method="POST" action="/">
  <div class="campo">
    <label for="email">Email</label>
    <input 
      type="email"
      id="email"
      placeholder="Tu Email"
      name="email"
    >
  </div>

  <div class="campo">
        <label for="password">Password</label>
        <input 
            type="password"
            id="password"
            placeholder="Tu Password"
            name="password"
        />
    </div>

    <input type="submit" class="boton" value="Iniciar Sesión">

</form>

<div class="acciones">
    <a href="/crear-cuenta">¿Aún no tienes una cuenta? Crear una</a>
    <a href="/olvide">¿Olvidaste tu password?</a>
</div>

解决方案 #

修改.boton的SCSS样式，添加margin: 0 auto;，让按钮在父容器中水平居中：

.boton {
    @include m.boton(v.$azul, v.$blanco);
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    // 添加该行实现按钮本身居中
    margin: 0 auto;
}

原理说明 #

• 你之前尝试的display: flex; justify-content: space-between;是控制容器内部元素的布局，而非让容器本身在父元素中居中。
• .boton原有的display: flex仅实现按钮内部文字居中，margin: 0 auto会让按钮这个块级元素在父容器（.formulario）中水平居中，且不会影响表单内的其他.campo元素（.campo为flex布局，不受外部margin设置影响）。

内容的提问来源于stack exchange，提问作者Diana