Reciban un cordial saludo. por favor les pido ayuda para entender un poco mas la parte del video donde está la instuccion transform: traslate(-50%, -50%)
Lo que no entendí es ese 50% esta referenciado con respecto a que? no parece ser la pantalla, porque iría en contravia de left: 50% y top:50%, por lo que no me queda claro si toma como referencia el 50% del tamaño del titulo o cual es el 100% de donde se toma ese 50%.
Como siempre, muchas gracias por su ayuda.
Hola,
La transformación translate se utiliza para mover un elemento a lo largo de un eje en una cantidad especificada. El valor translate(-50%, -50%) se utiliza comúnmente para centrar un elemento tanto horizontal como verticalmente en relación a su contenedor.
Cuando hablamos de centrar un elemento "en relación a su contenedor", nos referimos a que el elemento se centra en el área que ocupa su contenedor o elemento padre. En otras palabras, el elemento se mueve a la mitad del ancho y la mitad de la altura de su contenedor.
Aquí te muestro un ejemplo de código HTML y CSS para que puedas ver cómo funciona:
<div class="contenedor">
<div class="elemento">
<p>Este es un elemento centrado en su contenedor</p>
</div>
</div>.contenedor {
width: 500px;
height: 500px;
background-color: lightblue;
position: relative; /* necesario para posicionar el elemento interno */
}
.elemento {
position: absolute; /* necesario para posicionar el elemento interno */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
width: 300px;
height: 200px;
text-align: center;
}En este ejemplo, el elemento interno (con clase .elemento) se posiciona absolutamente en relación a su contenedor (con clase .contenedor) y se le aplica transform: translate(-50%, -50%) para centrarlo en el área del contenedor. Como resultado, el elemento interno queda centrado tanto horizontal como verticalmente dentro del contenedor.
Saludos.