How can I center the text in smaller device (phones,ipads,etc)?

Question

I've been coding a login screen but I have a problem when inspecting my page in smaller devices, I've already centered all the content of the page and when I'm opening it in my computer's browser it looks good, but when I inspect it with the browser developer tools with a smaller device look, it shows all the way to the left of my screen. here's the code of the page:

<TypeUser/>
      <div className="center">
        <div
          className="w-100 align-self-start p-5" style={{ maxWidth: 700 }}>
          <h1
            className="text-center  text-light">
            Regístrate / Inicia sesión
          </h1>
          <p className="text-center pb-3 mb-3 text-light">
          Descubre los mejores eventos en tu ciudad.
          </p>
          <form onSubmit={requestOTP}>
            <div className="row">
              <div className="col-12">
                <div className="position-relative mb-4">
                  <label htmlFor="phoneNumberInput" className="form-label fs-base text-light">
                    Inicia sesión con tu teléfono
                  </label>
                  <input
                    type="tel"
                    id="phoneNumberInput"
                    value={phoneNumber}
                    onChange={(event) => {
                      setPhoneNumber(event.target.value)
                      setExpandForm(false)
                      setErrorMessage(null)
                    }}
                    className="form-control form-control-lg"
                    placeholder='Número de teléfono móvil'
                  />
                </div>
                { expandForm === true
                  ? <>
                    <div className="position-relative mb-4">
                    <label htmlFor="otpInput" className="form-label fs-base text-light">Código de verificación</label>
                      <input
                        type="number"
                        id="otpInput"
                        value={OTP}
                        className="form-control form-control-lg"
                        placeholder='Código de verificación'
                        onChange={(event) => {
                          setOTP(event.target.value)
                        }}
                      />
                    </div>
                    <button
                      type='button'
                      disabled={OTP.length <= 5}
                      className="btn btn-lg btn-primary btn-block mb-3"
                      onClick={(event) => {
                        setErrorMessage(null)
                        verifyOTP(event)
                      }}
                      >
                        {`${isLoading ? 'Validando...' : 'Validar código'}`}
                      </button>
                  </>
                  : null
                }
                <AlertErrorForm messageError={errorMessage} />
                {
                  expandForm === false
                    ? <button type="submit" disabled={phoneNumber.length <= 12} className="btn btn-lg btn-primary btn-block mb-3">Solicitar código</button>
                    : null
                }
                  <div id="recaptcha-container"></div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </>
  )
}

I also have this css code that I used for putting everything in the middle in a browser look:

.center{
  padding-top: 8%;
  padding-left: 25%;
  text-align: center;
}

Answer 1

I was using the wrong css, the correct one is:

  .center{
  display: flex;
  align-items: center;
  justify-content: center;
  }

If you want, you can add things like padding and else.