5

Jun


Capa centrada con CSS

Autor: David

Este "truquito" para centrar una capa es bastante útil. Personalmente lo uso bastante si quiero mostrar algún aviso en la web o si quiero mostrar contenido por encima de todo el sitio. Hay que tener en cuenta que los margenes top y left, son exactamente a mitad de height y width pero negativos.

HTML:
  2. #capa_centrada{
  3.     position: absolute;
  4.     background-color:#cccccc;
  5.     width: 400px;
  6.     height: 300px;
  7.     top: 50%;
  8.     left:50%;
  9.     margin-top: -150px;
  10.     margin-left: -200px;
  11. }
  12. </style>
  13. <div id="capa_centrada"></div>

Los más entendidos ya sabrán que si quiero mostrar una capa por encima de las demás debo utilizar position:absolute; pudiendo especificar el nivel o altura relativa que tendrá con otras capas absolutas con la propiedad z-index.

Por ejemplo podemos aplicarle el style display:block; para mostrar la capa y con javascript podemos ocultar o mostrarla de la siguiente forma.

JAVASCRIPT:
  1. document.getElementById("capa_centrada").style.display = "block"; //muestra
  2. document.getElementById("capa_centrada").style.display = "none"; //oculta

 

Salu2

 

0 Comments css

-