Duda conceptual

¡Hola Silvia!

¡Gracias por tu pregunta! Con mucho gusto te explicaré qué significa cada valor en los dos atributos de CSS que mencionaste.

En el atributo transform: translate(-50%, -50%);, el valor -50% se refiere a la posición relativa del elemento en relación con su propio tamaño. En este caso, -50% significa que el elemento se desplazará hacia arriba y hacia la izquierda en un 50% de su propio tamaño. Esto se utiliza comúnmente para centrar elementos horizontal y verticalmente en su contenedor.

Por otro lado, en el atributo height:calc(100vh - 72px);, 100vh se refiere al 100% de la altura de la ventana gráfica (viewport height) y 72px es una medida en píxeles. La función calc() se utiliza para realizar cálculos matemáticos en CSS. En este caso, se está restando 72px de la altura total de la ventana gráfica, lo que permite que el elemento tenga una altura menor y se ajuste al tamaño deseado.

Aquí tienes un ejemplo práctico para que puedas entenderlo mejor:

Supongamos que tienes un contenedor con un ancho de 500px y un alto de 300px. Si aplicas transform: translate(-50%, -50%); al contenedor, este se moverá hacia arriba y hacia la izquierda en 250px y 150px, respectivamente, lo que lo centrará tanto horizontal como verticalmente dentro de su contenedor.

En cuanto al atributo height:calc(100vh - 72px);, si la altura de la ventana gráfica es de 800px, el elemento tendrá una altura de 728px (800px - 72px), lo que permitirá que se ajuste correctamente dentro de la ventana gráfica.

Espero que esta explicación te haya sido útil. Si tienes alguna otra pregunta, no dudes en hacerla. ¡Estoy aquí para ayudarte!

Espero haber ayudado y buenos estudios!