CSS3 transform translate – Centrar elemento

CSS3
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%.

CSS3 transform translate
CSS3 transform translate

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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.