CSS3 transform translate, o más correctamente transform:translate, nos sirve para centrar un elemento en una posición fija, relativa o absoluta.
CSS3 transform translate: Por norma general entendemos que para centrar un elemento en una página web lo podemos hacer con los parámetros CSS3:
top:50% y left:50%
Pero ¿Porqué no nos queda justamente en el centro? Una solución sería margin:auto podemos centrar un elemento con un:
width:100% y height:100%
Dentro de otro con medidas reducidas pero si no tenemos ese elemento contenedor ¿Cómo lo conseguimos?
Hay que tener en cuenta que un elemento puede tener un tamaño específico de ancho y largo, por lo tanto dependiendo del tamaño del objeto nos queda descentrado.
Uso de CSS3 transform translate
Para evitar este problema tenemos una buena forma usando el transform:translate de CSS3 que nos sirve para situarnos en menos de la mitad del tamaño total del objeto especificándole:
–50% de height y –50% de width
Y así centrar el objeto respecto al top:50% y left:50%.
Ejemplo: si queremos poner una etiqueta Div justamente en el centro de la página web para hacer una notificación al usuario, podemos hacerlo de la siguiente forma en el archivo CSS.
Ej. estilo1.css:
#DIVaCentrar{
transform:translate(-50%, -50%);
padding:5px;
border: 1px solid black;
position:fixed;
left:50%;
top:50%;
background-color:red;
opacity:0.7;
color:white;
text-align:center;
display:block;
width:340px;
height:auto;
border-radius:5px;
}Archivo HTML de prueba:
<html> <head> <title>Prueba div centrado</title> <link rel="stylesheet" href="estilo1.css" /> </head> <body> <div id="DIVaCentrar">Prueba de div centrado</div> </body> </html>
Podéis encontrar más información e incluso practicar con ejemplos en la excelente Web w3schools.
Hasta aquí otro de los artículos en informaticapremium sobre lo último en hardware, sistemas, almacenamiento, redes, programación, diseño web, recuperación de datos y actualidad del mundo de la técnica y la informática. Nos vemos en breve.