margin: 0 auto;
Sin embargo este método no nos servirá si el div que queremos centrar está posicionado absolutamente. En el caso más básico, podemos tener lo siguiente:
<body> <div style="position:absolute"></div> </body>
La solución para estos casos pasa por situarlos en el centro de la pantalla (50%) con un margen a la izquierda negativo de la mitad de su ancho. Digamos que nuestro DIV tiene 600px de ancho, para centrarlo:
<body> <div style="position:absolute;width:600px;top:0;left:50%;margin-left:-300px;"></div> </body>
Pero podemos ir un poco más allá. Hasta aquí hemos supuesto que conocemos el ancho del DIV que queremos centrar, pero no siempre es así, en ocasiones, el contenido de un DIV es dinámico y cambiará constantemente. El método anterior no nos servirá. La solución aquí es meter nuestro div dentro de un contenedor que nos ayudará a centrarlo:
<body>
<div style="position:absolute;left:50%;">
<div style="position:relative;left:-50%;"></div>
</div>
</body>
Y así quedará perfectamente centrado en la página
No hay comentarios:
Publicar un comentario