Imagen destacada del artículo Centrar formulario html y css

Centrar formulario html y css

html svgcss svg
actualizado: 04 / 01 / 2022

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.

Cargando... Esperando para mostrar el código de este ejemplo
Artículos relacionados:
Cómo crear un menú desplegable con html y css

Imagen destacada del artículo Cómo crear un menú desplegable con html y css

Aprende a usar e insertar imágenes en html

Imagen destacada del artículo Aprende a usar e insertar imágenes en html

Cómo poner una imagen de fondo en html con css

Imagen destacada del art�ículo Cómo poner una imagen de fondo en html con css

Cómo justificar el texto html con css

Imagen destacada del artículo Cómo justificar el texto html con css

Cómo cambiar color del texto en html con css

Imagen destacada del artículo Cómo cambiar color del texto en html con css

Cómo poner color de fondo en html con css

Imagen destacada del artículo Cómo poner color de fondo en html con css

Cómo insertar estilos css en html

Imagen destacada del artículo Cómo insertar estilos css en html

CSS text-align propiedad para alinear el texto de una etiqueta html

Imagen destacada del artículo CSS text-align propiedad para alinear el texto de una etiqueta html