Como centrar un elemento DIV utilizando CSS

Hola a todos.

El día de ayer me topé en mi trabajo con un requerimiento que estuvo a punto de sacarme “canas verdes” como decimos acá en Guatemala.

El requerimiento consistía en centrar en la pantalla un pequeño cuadro que desplegaba un mensaje de espera cuando se ejecutaba un “Partial Render” de un UpdatePanel de Atlas (o AJAX). El código (por motivos de privacidad no mostraré todo) lucía mas o menos así:

<atlas:UpdateProgress ID=”uProgress3″ runat=”server”>
<ProgressTemplate>
     <div id=”spinner” runat=”server”>
          <img src=”./images/spinner.gif” align=”absmiddle” alt=”"/>
          <asp:Label ID=”lblProgress” runat=”server”>
               <span id=”progress” style=”color:#94361D”>Processing…</span>
          </asp:Label>
     </div>
</ProgressTemplate>
</atlas:UpdateProgress>

Entonces debía centrar la imagen y el mensaje que aparecía en una cajita en la página, no solamente que apareciera en cualquier lado. En fin… La primera solución que pensé fue utilizar javascript para realizar el trabajo, pero me encontré con dos problemas principales. El primero, debido a que este div se encontraba dentro de la definición del control UpdateProgress no es accesible hacia afuera y debía hacer mucho código para poder encontrarlo. El segundo problema es que la página hace referencia a un “master page” y por lo tanto los algoritmos que hay para eso hacen necesario llamar funciones de javascript al cargar la página pero en este caso no hay un lugar donde poner el evento OnLoad como se hace en el tag de BODY.

¿Cuál fue la solución? Pues recurrir a los confiables y estándares Cascading Style Sheets (CSS), para lo cual hice un estilo con las siguientes características:

.centerbox
{
   position:fixed;
   top:50%;
   left:50%;
   margin-top:-40px;
   margin-left:-125px;
   height:80px;
   width:250px;
   text-align:center;
   padding-top:10px;
   border:1px solid lightsteelblue;
   background-color: #ffffff;
   font-family:Verdana;
}

Bien, veamos cada uno de los componentes del estilo y analicemos que está pasando. En primer lugar tenemos que la posición definida será de tipo fija (position:fixed), es decir, no lo haremos relativo a ningún punto sino que siempre estará en el mismo lugar (o mas o menos…). Luego he indicado que la distancia a la que se debe ubicar el objeto es al 50% desde el origen superior y el 50% del origen izquierdo (top:50%; left:50%;). El efecto de esto es que sin importar el tamaño de la ventana del navegador siempre tomaremos el centro de ese tamaño como punto de referencia. Ahora, viene lo interesante, El DIV tendrá un tamaño de 250px de largo por 80px de altura ( height:80px; width:250px;) y por tanto es necesario ubicar los márgenes superior e izquierdo en la mitad de esas cantidades para poder estar seguros de que se ha centrado correctamente y de forma realtiva al tamaño de la ventana del navegador. Para esto utilizamos la mitad de las medidas que serían 40px de altura y 125px de largo; pero es necesario que vayan especificados con signo negativo para que se tome del 50% original hacia atrás (si es el margen izquierdo) y hacia arriba (si es el margen superior).

Para ilustrar este efecto hice un extracto de la página ASP.NET en una página de html sencilla que se puede ver aquí:

El código es este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ejemplo de DIV centrado</title>
</head>
 
<style>
.centerbox
{
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-40px;
    margin-left:-125px;
    border:1px solid lightsteelblue;
    background-color: Navy;
    color: White;
    height:80px;
    width:250px;
    text-align:center;
    padding-top:20px;
    font-family:Verdana;
} </style>
  <body>
     <div id="spinner" class="centerbox">
               <span id="progress">Processing...</span>
     </div>
</body>
</html>

Pueden cambiar el tamaño a la ventana del navegador y verán que el div sigue centrado.

Espero que haya sido informativo y les sirva.

Saludos.

Febrero 13, 2008 - Publicado por joseguay | ASP.NET, Programación .NET, Visual Studio 2008 | CSS | 6 comentarios

6 comentarios »

[...] by mayatravel on 14 Feb 2008 at 10:24 pm | Tagged as: Uncategorized Como centrar un elemento DIV utilizando CSS Hola a todos. El da de ayer me top en mi trabajo con un requerimiento que estuvo a punto de sacarme [...]

Pingback por Maya Travel » Como centrar un elemento DIV utilizando CSS | Febrero 15, 2008
Hola muchas gracias de mucha utilidad .

comentario por Jhon | Marzo 4, 2008
Esta propiedad no es soportada por IE6 (aceptemoslo aun se usa), por lo que en tu lugar usaria una posicion absoluta.

Saludos.

comentario por Luis Pirir | Mayo 20, 2008
Hola Luis. Gracias por tu aporte.

Quisiera que nos compartieras como mejorarias tu esta solucion para proveer un soporte hacia atras con los navegadores.

Lo importante es que todos aprendamos un poquito mas cada dia.

Saludos y gracias.
Jose Rolando Guay Paz

comentario por joseguay | Mayo 20, 2008
Es un poco tarde para esta respuesta pero si de centrar una div se trata basta con darle un tamaño al div y en con la propiedad margin darle auto en otra palabras seria

div{
width:100px;
margin: 0xp auto;
}

saludos

comentario por José | Noviembre 7, 2008
muy bueno, muchas gracias

comentario por anonimo | Noviembre 20, 2008