Centrar formulario html y css

Actualizado : 2023-10-05

Antes aprendimos a centrar una imagen con css y con este tutorial conocerás como centrar un formulario en html ya que estas son dos habilidades que debemos dominar todos los diseñadores y desarrolladores web, centrar los inputs de un formulario uniformemente a veces se nos puede complicar, a continuación te explicaremos como hacerlo de forma sencilla.

Definamos la estructura html de nuesto form

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

html

<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

css

.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 correspondiente a su div contenedor. Esto es sobre todo para que ocupe todo el espacio disponible 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 mantenga sus elementos no ocupen todo el espacio disponible
La regla 'margin: 0 auto;' centra horizontalmente el contenido con respecto a su contenedor. en pantallas anchas el formulario estará en el centro del elemento y en pantallas estrechas ocupará todo el espacio disponible.
Usando flexbox alineamos los elementos tanto los input como el botón uno abajo del otro y centrándolos 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 y resultado en codepen

Como puedes ver centrar un formulario con css es muy fácil, puedes ver todo el código del ejemplo a continuación.

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi