1

Quiero centrar un div que contiene un form. Intenté hacerlo con display:flex, pero no funciona. Adjunto el HTML:

<div class="formcontacto">
            <form id="form" class="form" align="center" action="https://formspree.io/f/xzbyyrvn" method="POST">

                <input align="center" type="text" name="nombre" placeholder="Nombre y Apellido" required>


                <input type="mail" name="_replyto" placeholder="E-MAIL" required>



                <textarea name="message" placeholder="Tu Mensaje" required></textarea>

                <!-- your other form fields go here -->
                <button type="submit">Enviar</button>
            </form>
</div>

Por otra parte, mi CSS es este:

body{
  font-family: 'Libre Baskerville', 'serif', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: #333;
  font: 1,2rem;
  line-height: 1,3em;
  margin: 0;
  
}
.form{
  display: block;
  justify-content: center;
  align-items: center;
  width: 500px;
  
}
  .formcontacto{
  display: flex;
  justify-content: center;
  align-items: center;
}

Y se ve de esta manera: Como se ve la el formulario de contacto

Cuando en realidad, quiero que este esté en el medio de la pantalla.

Muchas Gracias.

Como quedó después de aplicar: introducir la descripción de la imagen aquí

    .formcontacto{
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-49%, -49%);
}
4
  • Saludos, he intentado replicar tu código y no soy capaz (me aparece de forma totalmente distinta). Por favor, pásame el CSS de la clase "form". ¡Gracias!
    – Tupi
    el 15 sep. 2021 a las 11:55
  • Haz un ejemplo mínimo verificable en tu pregunta convirtiendo tu código en snippet, pulsando en el botón que indica <>.
    – padaleiana
    el 15 sep. 2021 a las 12:00
  • saca el display: block; del .form con eso ya te estaría funcionando con flexbox.
    – Roy
    el 15 sep. 2021 a las 12:55
  • No funciona de esa forma.
    – RuthIsRoot
    el 15 sep. 2021 a las 13:02

2 respuestas 2

3

Con este codigo, tu formulario de contacto debería centrarse completamente al centro de tu pantalla.

.formcontacto{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-49%, -49%);
}

En este caso, el contenido queda alineado completamente al centro de la pantalla, en caso de querer aumentar la altura del contenido para que el formulario se encuentre más abajo hay que añadir porcentaje a top. En caso inverso, querer que se encuentra más hacia arriba, decrementar porcentaje a top, los mismo para left.

6
  • El problema es que empieza a flotar en el medio de la pantalla y tapa el resto del contenido el 15 sep. 2021 a las 12:44
  • Podrías insertar una imagen del problema que estas teniendo?
    – RuthIsRoot
    el 15 sep. 2021 a las 12:46
  • Listo, ya inserté una imagen el 15 sep. 2021 a las 12:48
  • De acuerdo, ya veo tu problema, solo tienes que añadir mas porcentaje a top: 50%, piensa que lo que le estas diciendo es que tenga un espaciado de top de un 50%, si necesitas que tenga mas espaciado (que se vaya mas hacia abajo en este caso) añádele mas porcentaje, por ejemplo prueba con top: 70%, si necesitas mas, aumenta el valor. En caso de que quisieras que fuera más hacia arriba deberías decrementar el valor.
    – RuthIsRoot
    el 15 sep. 2021 a las 12:53
  • El código que te he publicado yo es para que este exactamente al centro de la pantalla como pedias. Hay otras formas de alinear al centro de la pantalla. Pero yo encuentro que esta es la forma más cómoda.
    – RuthIsRoot
    el 15 sep. 2021 a las 12:54
0

Si alguien solo busca como centrar el Form en el centro del espacio que tiene predeterminado este codigo te servirá form{ width: 50%; margin: 0 auto ; }

es lo que yo estaba buscando pero esta encontré aquí para colocarlo en el centro de la pantalla, yo solo buscaba un efecto "text-align: center;", y este es :)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.