ProgramingWeb

Centrar formulario html y css

Centrar un formulario en html es una habilidad que debemos dominar todos los diseñadores y desarrolladores web, a pesar de esto, centrar los inputs de un formulario uniformemente a veces se nos puede complicar, a continuación te explicaremos de forma sencilla como centrar un formularo en css

Definamos la estructura html de nuesto form

Para este ejercicio crearemos una estructura sencilla con un div que actura de contenedor y un form con tres inputs.

<div>
  <form class="form">
    <input type="text" />
    <input type="email" />
    <input type="password" />
    <button type="submit">Enviar</button>
  </form>
</div>
  • Tenemos un div que envuelve al formulario.
  • El elemento form tiene una clase 'form' que usaremos para asignar los estilos en nuestra hoja css.
  • Luego tenemos tres inputs y un botón con los valores típicos de un formulario.

A continuación añadimos el css para alinear los elementos del formulario.

Agregar css para centrar el form y hacerlo responsive

.form {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.form input {
  width: 90%;
  height: 30px;
  margin: 0.5rem;
}

.form button {
  padding: 0.5em 1em;
  border: none;
  background: rgb(100, 200, 255);
  cursor: pointer;
}
  • Usando la clase form le asignamos al formulario un ancho de 100% 'width: 100%;' , para que abarque todo el ancho correspodiente a su div contenedor. Esto es sobre todo para que ocupe todo el espacio en pantallas pequeñas.

  • Al form le asignamos un ancho máximo de 600px 'max-width: 600px', hacemos esto para que en pantallas más grandes el formulario no se estire demasiado y matenga sus elementos no ocupen todo el espacio disponible

  • La regla 'margin: 0 auto;' centra horizontalmente el contenido con respecto a su contenedor. en pantallas grandes el formulario lucira en el centro del elemento y en pantallas pequeñas ocupara todo el espacio.

  • Usando flexbox alineamos los elementos tanto los input como el botón uno abajo del otro y centrandolos dentro del formulario para poner los elementos uno abajo del otro y centrar los inputs dentro del form.

  • Por ultimo agregamos algunos estilos para que los inputs y el botón se vean mejor.

Finalizando el formulario Como puedes ver centrar un formulario con css es muy fácil, puedes ver todo el código del ejemplo en el siguiente enlace.