Centrar un div con CSS

por

En este artículo vamos a explicar cómo centrar un div con CSS y fijarlo en la pantalla tanto vertical como horizontalmente. Además, aplicando algunas técnicas CSS muy interesantes, podemos añadir comportamientos adicionales que hacen que nuestro div sea mucho más versátil haciendo que:

  • Aparezca y desaparezca
  • Se muestre centrado sobre otro contenedor
  • No interfiera con el comportamiento de otros elementos de la página

Esto resulta especialmente útil cuando queremos mostrar un panel de información adicional, pero solo cuando el usuario hace clic en algún elemento, como por ejemplo:

  • Mostrar una tabla de datos
  • Mostrar un formulario de login
  • Mostrar un banner de publicidad

Vamos a desglosar cada parte del código HTML y CSS para entender exactamente cómo funciona.

Centrar div con CSS
Ejemplo de div centrado con CSS que aparece al pulsar un enlace

Estructura HTML

Para centrar nuestro div con CSS vamos a trabajar con una estructura HTML básica que además implementa un sistema de “popup” con su propio botón de cierre. Con esta estructura y comportamientos conseguimos los siguiente:

  • El div está oculto inicialmente
  • El div sólo se muestra al hacer clic en un enlace
  • El div sólo se cierra al hacer clic en su botón cerrar

Solo con HTML y CSS, sin utilizar JavaScript, este es bloque HTML de ejemplo:

<body>
  <h2>Ejemplo de DIV centrado en la pantalla con CSS</h2>
  <p>Nuestro div aparecerá en el centro de la pantalla al pulsar este <a title="Abrir div" href="#openBox">enlace</a></p>  
  <div id="openBox" class="openBox">
    <a title="Close" class="closeBox" href="#closeBox">X</a>
    <p>Este es el div "oculto" que aparece al activarlo</p>
    <p>Contiene su propio botón de cierre y podemos añadirle elementos</p>
    <img src="una_imagen.jpg" />
  </div>
</body>
</html>

Este código HTML nos muestra una página con un enlace para activar y hacer que aparezca nuestro div. Aquí hay dos cosas importantes que debemos destacar sobre el div:

  • Le asignamos un id único id="openBox" que permite enlazar directamente este elemento con el enlace href="#openBox"
  • Le asignamos la clase CSS .openBox que contiene toda la lógica visual y de comportamiento del div
  • Le añadimos un enlace href="#closeBox" que será su botón de cierre
  • Dentro del div podemos añadir cualquier tipo de contenido

NOTA: El atributo id del div y el valor del href del enlace deben coincidir para que el navegador pueda identificar correctamente el elemento. En este caso, he utilizado el mismo nombre (openBox) tanto para el id como para la clase CSS por comodidad, pero no es obligatorio: el HTML y el CSS pueden usar nombres distintos sin problema.

Estructura CSS

Para que la estructura HTML se ajuste al comportamiento que queremos, debemos añadir las reglas CSS para centrar nuestro div en la ventana. Son las siguientes:

Centrar el div con CSS

Este código CSS se aplica al div que queremos centrar y al que hemos asignado la clase openBox. Aquí se definen los estilos necesarios para que, al cargar la página, permanezca oculto para el usuario pero listo para mostrarse mediante reglas CSS.

    .openBox {
      top: 0;
      left: 0;
      opacity: 0;          
      width: 50%;
      height: 50%;
      z-index: 9999;   
      position: fixed;
      pointer-events: none;   
      background-color: #cccccc;       
      transform: translate(50%, 50%);  
      transition: opacity 400ms linear;
    }
  • top: 0, left: 0; Sitúan el origen del div en la esquina superior izquierda.
  • opacity: 0; El div es completamente transparente (invisible) al cargarse la página HTML.
  • width: 50%, height: 50%; Asignamos el tamaño de todo el div en un 50% del ancho y alto de la ventana del navegador. Al estar centrado, creará un efecto limpio y equilibrado.
  • z-index: 9999; Esto hace que el div, cuando se muestre, aparezca por encima de cualquier otro elemento de la página.
  • position: fixed; El div se posiciona respecto a la ventana del navegador y no respecto a la página HTML, haciendo que permanezca fijo aunque se haga scroll.
  • pointer-events: none; Esto es muy importante para evitar problemas de solapamientos. El div no captura clics ni eventos del ratón (aunque esté oculto) y es como si no existiera para el usuario. Esto evita que el div invisible bloquee la interacción con algún elemento de la página.
  • background-color: #cccccc; Es muy recomendable darle un color de fondo que resalte sobre la página HTML cuando el div aparezca.
  • transform: translate(50%, 50%); Este es el truco clave del centrado. Desplaza el div un 50% de su propio ancho y alto hacia la derecha y abajo. Como parte desde (0,0), esto lo deja exactamente centrado. Es una técnica muy eficiente porque evita cálculos dinámicos o márgenes negativos.
  • transition: opacity 400ms linear; Esto le da una pequeña animación a nuestro div, haciendo que aparezca y desaparezca gradualmente en 400 ms cuando cambiemos su propiedad opacity.

Activar el div con CSS

Esta pequeña regla es quien hace la magia de activar el div y hacer que aparezca para el usuario. El truco está en su pseudoclase :target, que se activa cuando el id del elemento coincide con el fragmento de la URL actual al hacer clic en el enlace de activación. Funciona de la siguiente manera:

.openBox:target {
  opacity: 1;
  pointer-events: auto;
}
  • El usuario hace clic en el enlace para abrir el div <a href="#openBox">
  • La clase «openBox» entra en estado :target y se activa la regla CSS
  • El div que tiene la clase "openBox" recibe los cambios CSS
  • El div cambia su estado opacity a 1 y se hace visible
  • El div cambia sus pointer-events en auto y se vuelven activos para interactuar con él
  • La aparición del div se realiza mediante una transición suave y constante de 400 ms

Contenido interno del div

Dentro de nuestro div podemos añadir y ajustar todos los elementos que queramos (teniendo en cuenta el espacio disponible), simplemente añadiendo sus propias reglas CSS, en este caso una imagen:

.openBox img {
  width: 100%;
  height: 100%;
}
  • La imagen ocupa el ancho y alto de todo el contenedor (100%).
  • Con esta regla se ajusta automáticamente al espacio total disponible en el div, aunque esto puede causar alteraciones en sus proporciones naturales.

Botón de cierre del div

Como nuestro div incluye su propio botón de cierre mediante el enlace href="#closeBox", le asignaremos estilos CSS para que funcione como el típico botón (X) situado en la esquina superior derecha. Para ello, añadimos las siguientes reglas CSS:

.closeBox {
  top: -12px;
  right: -12px;
  width: 24px;
  color: #000000;
  line-height: 24px;
  text-align: center;
  font-weight: bold;
  position: absolute;
  border-radius: 12px;	
  text-decoration: none;
  background-color: #FF0000;
  box-shadow: 1px 1px 3px #000;
}
  • top, right; Colocamos el botón con la mitad fuera (-12px) de la esquina para un efecto flotante.
  • width, color, line-height; Establecemos el tamaño del texto en 24px y de color negro.
  • text-align, font-weight; Ajustamos el texto (X) en el centro del botón y lo ponemos en negrita.
  • position: absolute; Posicionamos el botón de forma absoluta respecto al div padre (openBox).
  • border-radius: 12px; Para este tamaño de texto crea un círculo perfecto.
  • text-decoration: none; Anulamos el efecto subrayado por defecto de los enlaces.
  • background-color, box-shadow; Ponemos un fondo rojo al botón y sombreado suave.

Interacción con botón de cierre

En el contexto HTML es casi obligado mostrar la interacción con el usuario por lo que creamos el efecto :hover del botón:

.closeBox:hover {
  color: #FFFFFF;
}
  • Cambia el color del texto a blanco al pasar el ratón por encima

Cerrar el div centrado

Al hacer clic en el botón de cierre (X) suceden los siguientes eventos que, junto con las clases CSS, crean los siguientes efectos:

<a class="closeBox" href="#closeBox">X</a>
  • La URL cambia a #closeBox por lo que el div deja de ser :target y recupera sus atributos originales de la clase .openBox, desapareciendo.

Centrar un div con CSS

En este artículo hemos visto cómo centrar un div con CSS y fijarlo en la pantalla, tanto vertical como horizontalmente. Aplicando técnicas de HTML y CSS, podemos controlarlo de forma dinámica sin necesidad de recurrir a JavaScript para gestionar su visibilidad. Gracias al uso del selector :target, aprovechamos el propio comportamiento del navegador con los enlaces (href) para mostrar y ocultar elementos de forma sencilla y eficiente.

Además, hemos definido una clase CSS (openBox) que permite reutilizar fácilmente este comportamiento en distintas páginas de la web. Sin embargo, es importante tener en cuenta que esta técnica tiene una limitación: no se puede utilizar varias veces en la misma página, ya que el selector :target solo puede aplicarse a un único elemento a la vez.

Combinando propiedades CSS como position, transform, transition y opacity, conseguimos no solo centrar el div en la pantalla, sino también controlar su aparición de manera suave mediante transiciones. El uso de pointer-events permite evitar interacciones no deseadas cuando el elemento está oculto, mejorando así el comportamiento general de la interfaz.

Este tipo de técnicas resultan especialmente útiles para crear ventanas modales simples, avisos o paneles informativos sin añadir complejidad innecesaria al código. Resultando en una alternativa muy interesante cuando buscamos rendimiento, simplicidad y compatibilidad en nuestros proyectos web. Ahora prueba a añadirle tu propio toque artístico!

¡ Espero que este artículo sea de vuestro interés !

Deja un comentario