Cómo centrar verticalmente una imagen en un contenedor con CSS flexbox

sabogal · 24 Feb 2023

Cómo centrar verticalmente una imagen en un contenedor es una pregunta que he visto por ahí más de una vez, así que probé preguntar en chat.openai y esto es lo que respondió en 30 segundos:

Insertar CODE, HTML o PHP:

.contenedor-imagen {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* opcional, para establecer la altura del contenedor */
}

.imagen {
  max-width: 100%; /* opcional, para ajustar el tamaño de la imagen al contenedor */
}

Ya es mejor preguntarle en openai que preguntar en forobeta.
He conseguido que openaai me haga códigos más complejos, como una encuesta en php y MySQL, con formulario html y css, todo completo....

Andresser17 · 24 Feb 2023

Este ejemplo es sencillo, algo que encuentras en 30 segundos con una busqueda en Google.

Por ahora OpenAI parece un Google ultravitaminado.Y asi creo que es como lo usara la gran mayoria de sus usuarios.

Creations · 20 Mar 2023

Ojo que no siempre te muestra la mejor solución. Tambien podrías centrar la imágen con grid:

CSS:

.contenedor-imagen {
    display: grid;
    place-content: center;
    height: 100vh;
}

Aunque al final con que haga el trabajo es suficiente 😁

Ángeluz23 · 6 Abr 2023

intersante hermano

Matiasgq · 10 Abr 2023

Si no también se puede utlizar.

CSS:

vertical-align:top;

Hay muchisimas formas de alinear los items. No se si la respuesta de chat.openai fue la más optima en este caso.

Dezzed · 10 Abr 2023

La AI está arrazando con todo, vaya locura. 😅

Ángeluz23 · 16 Abr 2023

Que genial muchas gracias!

moiseseccam · 16 Abr 2023

No se a lo que llames complejo, pero GPT-4 es bueno para evitar buscar en Stackoverflow

ultracobra · 18 Abr 2023

Yo me he apoyado en ChatGPT para hacer algunas cosas pero me interesa eso de "una encuesta en php y MySQL, con formulario html y css, todo completo"
Me gustaría verlo, o hasta hacer mi versión pero igual de interesante comparar resultados finales...