ProgramacionWeb - Ayuda al webmaster
No has iniciado sesión
Conectar al sistema | Registrar usuario
Articulos
  Categorías Articulo  
 
30 votos
Centrar vertical y horizontalmente
CSS (Articulos) | Fecha: 07/09/06
Versiones
Editar/Traducir
Envía tu artículo >>
 
 
Cuando maquetamos páginas web, a menudo queremos centrar un objeto de manera que ocupe siempre la posición central del espacio disponible en el navegador del visitante, esto no tiene problema si el tamaño del objeto es relativo
 
000 
001 
002 
003 
004 
005 
006 
* {
    position: absolute;
    top: 20%;
    height: 60%;    // 60% + 20% superior + 20% derecha = 100%
    left: 20%;
    width: 60%;    // 60% + 20% + 20% = 100%
}
 
Pero por desgracia, si el objeto queremos que tenga un tamaño absoluto, la cosa no es tan fácil como puede parecer.

Si buscamos en Google, veremos que existen muchas discusiones sobre este tema, y encontraremos soluciones basadas en tablas, otras que utilizan algunos DIV que ayudan a posicionar el objeto en la posición adecuada... pero esto no es del todo limpio.

Al añadir Div's o tablas estamos utilizando XHTML para definir la posición de un objeto cuando los modelos de desarrollo web actuales y respaldados por el W3C dictan esta tarea deberíamos realizarla con CSS.

Os voy a explicar la manera que creo que es la más correcta de hacerlo, y que utiliza simplemente el objeto a centrar y sus estilos CSS.

ArribaTabla de contenido

ArribaTeoría

Para conseguir que un elemento ocupe la posición central de su contenedor su vértice superior izquierdo debería estar situado en la siguiente coordenada X,Y:
X - ( ancho contenedor / 2 ) - ( ancho objeto / 2 )
Y - ( alto contenedor / 2 ) - ( alto objeto / 2 )
La primera parte de cada coordenada ( ancho,alto contenedor / 2 ) es sencilla, solo debemos situar el objeto en el medio ( 50% ) de su contenedor.
 
000 
001 
002 
003 
004 
* {
    position: absolute;
    left: 50%;
    top: 50%;
}
 
Pero así el objeto no estará centrado, sinó que el que estará en el centro será su vértice superior izquierdo, todavía nos falta restarle a esta posición la mitad del tamaño del objeto ( y no podemos hacer 50%-150px ).



Para esto, utilizaremos un margen negativo igual a la mitad del tamaño del objeto, lo que hará que el objeto se desplace hasta la posición deseada:
 
000 
001 
002 
003 
004 
005 
006 
007 
008 
* {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 200px;
    margin-top: -100px;    // 200px/2
    width: 300px;
    margin-left: -150px;    // 300px/2
}
 

ArribaEjemplo

Vamos a ver un ejemplo completo para centrar un div, le he añadido un borde para que se identifique mejor y una barra de desplazamiento para que no cambie su tamaño:
 
000 
001 
002 
003 
004 
005 
006 
007 
008 
009 
010 
011 
012 
013 
014 
015 
016 
017 
018 
019 
020 
021 
022 
023 
024 
025 
026 
027 
028 
029 
030 
031 
032 
033 
034 
035 
036 
037 
038 
039 
040 
041 
042 
043 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
        div {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 300px;
                height: 200px;
                margin-top: -100px;
                margin-left: -150px;
 
                overflow: auto;
                border: 1px solid red;
        }
        </style>
    </head>
    <body>
        <div>
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado <br />
            Este es el DIV centrado
        </div>
    </body>
</html>
 
Podéis ejecutar este ejemplo aquí, funciona en todos los navegadores en los que lo he probado
 
 
Comentarios
26/11/06 La idea es muy buena
No había pensado en poner el margen ese, ahora sí que podré centrar bien mis capas. Gracias.
18/06/08 Comentario 854
Un tesoro. Me va ideal para lo que estaba preparando. Con tablas no podía situar textos sobre imágenes y con PA no sabía como centrar. Muchísimas gracias.
18/06/09 Comentario 1244
Funciona en todos los navegadores que has probado... del sistema operativo Windows.
Como casi siempre, los makeros quedamos excluídos de las pruebas.
No funciona en el IE para Mac.
Espero que lo puedas resolver para que no se quede coja tu programación.

un saludo
24/06/09 No vale
Yo tengo el mismo problema desde hace tiempo. He usado esta solución desde hace bastante tiempo pero cuado el objeto tiene unas dimensiones mayores que la resolución de la pantalla te dejas parte de la cabecera oculta. Sobre too en portátiles puede tener este problema, así que tendremos que seguir dándole vueltas al tema
26/08/09 Otra alternativa
un pequeño aporte para quien le sirve, una manera un poco mas limpia de hacer, al div contenedor donde ira todo el cuerpo de la pagina, en su estilo poner: position:relative;
width:indicar_anchopx;
height:100%;
margin: 0 auto;

Con esto se centra en pantalla en contenido( el div contenedor), espero que les sirva, exitos!!!!!
31/03/10 Muchisimas gracias
Gracias, este articulo es justamente lo que andaba buscando para centrar divs (pequeños claro).
Enviar tu comentario >>
 
Resolver dudas
Si tienes problemas o dudas con el contenido del artículo no dudes a preguntar en los foros de CSS de Programación Web indicando el artículo al que te refieres.
Ir al foro de CSS >>

 
Autor:
 eloi
 
Traducciones