Supongamos que tengo un <div>
que deseo centrar en la pantalla del navegador (viewport). Para ello, necesito calcular la anchura y la altura del elemento <div>
.
¿Qué debo utilizar? Por favor, incluya información sobre la compatibilidad de los navegadores.
NOTA: Esta respuesta fue escrita en 2008. En ese momento la mejor solución entre navegadores para la mayoría de la gente era realmente usar jQuery. Estoy dejando la respuesta aquí para la posteridad y, si usted está usando jQuery, esta es una buena manera de hacerlo. Si estás usando algún otro framework o JavaScript puro la respuesta aceptada es probablemente el camino a seguir.
A partir de jQuery 1.2.6 puedes utilizar una de las funciones centrales CSS, height
y width
(o outerHeight
y outerWidth
, según el caso).
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
element.offsetWidth y element.offsetHeight deberían servir, como se sugiere en el post anterior.
Sin embargo, si sólo quieres centrar el contenido, hay una mejor manera de hacerlo. Asumiendo que usas xhtml strict DOCTYPE. establece la propiedad margin:0,auto y el ancho requerido en px a la etiqueta body. El contenido se alinea al centro de la página.