如何将表单的输入按钮居中对齐？

Question

我想将表单的

input

居中对齐。

但是，这是一个有多个scss文件的项目，我不想破坏它。

我需要尝试仅通过修改此处向您展示的 CSS 来对齐它，这样它就不会影响表单屏幕的其他元素。 由于我们使用了 scss 并且代码中未包含变量，因此表单看起来不太好。

现在

input

已左对齐。

我尝试过以下代码：

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

但是不起作用，输入按钮仍然左对齐。

也许我举的例子有点少

.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);
}

<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>

Answer 1

<style>
.boton {
  display: block;
  margin: auto;
}
</style>

这会将提交按钮对齐到中心。显示：块；属性使元素表现得像块级元素，而 margin: auto;属性自动调整左右边距并将元素水平居中对齐。