如何解决登录页面在移动设备（手机、平板）上的文本居中问题？

你的问题出在自定义的.center类用了固定的padding-left: 25%——桌面端屏幕宽度足够，这个内边距能让内容居中，但移动端屏幕狭窄，固定百分比的左内边距直接把内容挤到了左侧，且没有响应式适配逻辑。

结合你已经在使用Bootstrap的情况，推荐用Bootstrap原生响应式工具类替代自定义CSS，实现全设备一致的居中效果：

步骤1：移除自定义的.center CSS #

直接删除这段代码：

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

步骤2：修改JSX中的容器类 #

把外层的className="center"替换为Bootstrap的flex居中类，同时调整内部容器的类：

<TypeUser/>
<div className="d-flex justify-content-center min-vh-100 pt-5">
  <div className="w-100 mx-auto 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>

代码说明 #

• d-flex justify-content-center：将容器设为flex布局，子元素水平居中，这个类是响应式的，所有设备都生效。
• min-vh-100：让容器占满视口高度，避免内容过短时居中失效。
• pt-5：提供顶部间距，替代原来的padding-top:8%，Bootstrap的间距类会根据屏幕尺寸自动调整大小。
• mx-auto：让内部容器在宽度小于父容器时自动水平居中，配合w-100和maxWidth:700，大屏上限制宽度，小屏上占满可用空间且居中。

这样修改后，桌面端和移动端的内容都会保持居中显示，完全利用Bootstrap的响应式特性，不需要额外写媒体查询。

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