How to align the input button of a form in the center?

Question

I want to center align the input of a form.

However, it is a project where there are multiple scss files and I don't want to break it.

I need to try to align it only by modifying the CSS that I show you here, so that it does not affect other elements of the form screen. The form will not look very good since we use scss and there are variables not included in the code.

Now the input is left aligned.

I have tried the following code:

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

However it doesn't work, the input button is still aligned to the left.

Maybe the example I show is little

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

This will align the submit button to the center. The display: block; property makes the element behave like a block-level element, and the margin: auto; property automatically adjusts the left and right margins and aligns the element horizontally in the center.