Cuantas veces hemos querido centrar una capa que estaba con posición absoluta y nos hemos liado añadiendo estilos innecesarios y sin conseguir el objetivo. Esto es, por ejemplo, cuando tenemos un lightbox o popup que queremos mostrar en centro de la pantalla. De la siguiente manera lo haremos de una forma sencilla y no falla!
Ejemplo
Vamos a simular que queremos mostrar un popup en el centro de la pantalla con un mensaje de error:
Error
Se ha producido un error. Vuelva a intentarlo más tarde
Para centrar la capa horizontalmente necesitamos aplicar los siguientes estilos:
El resultado sería el siguiente:
Error
Se ha producido un error. Vuelva a intentarlo más tarde
Si además queremos centrarlo verticalmente, aplicaremos los siguientes estilos:
El resultado es el siguiente:
Error
Se ha producido un error. Vuelva a intentarlo más tarde
Como requisito para que este método funcione es que debemos conocer el ancho y el alto de la capa a centrar.
Compatibilidad en navegadores
 |
 |
 |
 |
 |
||
|---|---|---|---|---|---|---|
| >IE7 | IE8 | IE9< | ||||
 |
|
|
|
|
|
|