Centrar una capa con CSS

En algunos casos, cuando programamos con capas y nos olvidamos de las molestas tablas del pasado, pudiera ocurrir que quisiéramos mostrar una capa con un mensaje “cargando” o un mensaje informativo, que apareciera por delante de las demás capas de nuestra página y en el centro de nuestra pantalla, independiente del tamaño de esta.

Este efecto se puede conseguir y/o mejorar con librerías como LightBox, pero si lo que buscamos es algo más sencillo, claro y rápido, podemos usar esta solución.

El código para centrar una capa en nuestra pantalla y que ésta aparezca por delante de todas las demás es el siguiente:

#centro{
border: 3px solid #FFF;
padding: 2px;
z-index: 100; /* Para que aparezca por delante de todas   */
position: absolute;
background-color: #3972AB; /* White background color for the message */
color: #FFF;
width: 200px;
height: 14px;
top: 50%; /*Lo colocamos al 50% de la pantalla en vertical*/
left: 50%; /*Lo colocamos al 50% de la pantalla en horizontal*/
margin-top: -7px; /*le restamos la mitad del valor de height para centrarla*/
margin-left: -100px; /*le restamos la mitad del valor de width para centrarla*/
}

Cualquier capa cuyo id sea “centro” aparecerá en el centro de nuestra pantalla, y por delante de las demás, para mostrarla o ocultarla podemos hacer uso de las propiedades de mostrar ocultar capas con javascript.

¿Qué es lo importante de este código?

Lo realmente importante de este código, son las 6 últimas propiedades que son las que realmente determinan el lugar donde se posicionará la capa (el centro de la pantalla) aunque también es importante la propiedad de z-index que hará que nuestra capa se muestre la primera, a valores de z-index más pequeños, la capa estará más atrás, por eso, al adjudicarle un valor de 100 casi seguro que saldrá la primera.

¿Cómo se puede mejorar?

Si por ejemplo quisiéramos desactivar todo el área de pantalla que queda fuera de nuestra capa, podríamos utilizar la librería antes mencionada (LightBox) aunque ya existen scripts que hacen este menester, como este ejemplo, que podemos descargar desde aquí.