Cómo colocar automáticamente una imagen verticalmente dentro de su div padre

1. Primero, coloque la posición de la imagen: relativa para que pueda empujarla.
2. Luego configure top: 50% para que comience en el medio del contenedor principal
3. Si la imagen tiene una altura fija, puede hacer un margen negativo superior a la mitad de esa altura, pero un escenario más razonable es que la imagen tiene una altura desconocida, por lo que puede usar transform: translateY (-50%) para compensarlo la mitad de su altura, lo que lo hace perfectamente centrado verticalmente.
4. BONIFICACIÓN: Si la imagen tiene un ancho menor que el contenedor principal, probablemente también desee centrarla horizontalmente, por lo tanto, haga que la imagen se muestre: bloque; margen: 0 automático. Mientras estamos en eso, también podría establecer el ancho máximo al 100% en lugar de usar un número mágico de 400 px en caso de que el tamaño del contenedor principal cambie alguna vez.

Aquí hay un violín con el resultado final:
Editar violín – JSFiddle

.caja{

altura: 400 px;

ancho: 400 px;

arriba: 50%;

izquierda: 50%; / * trae tus propios prefijos * /

borde: 1px negro sólido;

posición: auto;

}

.box img {

ancho máximo: 400px;

margen superior: auto;

margen inferior: auto;

transformar: traducir (0%, 50%);

}

Puede cambiar la transformación de la forma que desee.

Espero que responda tu pregunta

He escrito software que te ayuda a escribir el código para restricciones de diseño avanzadas como esta. Actualmente es gratis en http://www.radii8.com .

Una vez que se está ejecutando:

1. Crea un nuevo documento
2. Arrastre un Contenedor de borde o un Grupo al escenario desde el Inspector de componentes. Opcional.
3. Luego arrastre un componente de Imagen al contenedor o escenario (donde quiera que esté centrado). Opcionalmente, puede arrastrar una imagen desde su escritorio.
4. Abra el Inspector de diseño y seleccione la casilla de verificación VerticalCenter. Establezca el valor en cero.
5. Haga clic en el botón de perspectiva Desarrollador en la esquina superior derecha
6. Abra la vista de código
7. Seleccione HTML para mostrar el HTML generado
8. Seleccione marcado y vista CSS.

Esto le mostrará el marcado HTML y CSS generado que centrará su imagen verticalmente en un contenedor.

Simplemente haga que el padre div ‘posición: relativo’ y establezca la posición de la imagen: absoluto. Establecer arriba y abajo 25%. Me gusta esto

.caja{
altura: 400 px;
ancho: 400 px;
borde: 1px negro sólido;
posición: relativa;
}
.box img {
posición: absoluta;
ancho máximo: 400px;
arriba: 25%;
abajo: 25%;
}

Puede usar margin-top para colocar una imagen verticalmente. También puede usar position:absolute con una propiedad top , pero asegúrese de que el padre tenga propiedades position:relative . Otra forma es usar flexbox que le permite centrar directamente un elemento verticalmente.

Toda la respuesta dada allí es correcta. Pero la solución más simple es establecer la altura de línea del div padre igual que la altura del div. Además, simplemente establezca la alineación vertical en el medio.

Aquí está el fragmento:

.caja{
altura: 400 px;
ancho: 400 px;
borde: 1px negro sólido;
altura de línea: 400 px; / * line-height igual que div height * /
}
.box img {
alineación vertical: medio; / * establece la alineación vertical en el medio * /
ancho: 100%
}

Y aquí está tu JSFiddle de trabajo

También podemos usar display:table-cell propiedad display:table-cell para la misma salida.

Aquí está el fragmento:

.caja{
display: table-cell;
alineación vertical: medio;
borde: 1px negro sólido;
ancho: 400 px;
altura: 400 px;
}
.box img {
ancho: 100%
}

Aquí está la misma salida: JSFiddle

Puede usar flex-box para centrar elementos vertical y horizontalmente dentro de otros elementos.

CSS más limpio y sin pirateo