MicroTut:centrar un div tanto horizontal como verticalmente

Al crear diseños de páginas web, probablemente se haya enfrentado a una situación en la que necesita centrar un div tanto horizontal como verticalmente con CSS puro. Hay más de unas pocas maneras de lograr esto, y en este MicroTut les voy a mostrar mi favorito que involucra CSS y jQuery.

Pero primero, lo básico:

Centrado horizontal con CSS

Es tan fácil como aplicar un margen a un div:

.className{
    margin:0 auto;
    width:200px;
    height:200px;
}

Para centrar un div solo horizontalmente, debe especificar un ancho y un auto valor para los márgenes izquierdo y derecho (recuerdas las declaraciones abreviadas en CSS, ¿no?). Este método funciona en elementos de nivel de bloque (divs, párrafos, h1, etc.). Para aplicarlo a elementos en línea (como hipervínculos e imágenes), debe aplicar una regla adicional:display:block .

Centrado horizontal y vertical con CSS

Centrar un div tanto horizontal como verticalmente con CSS es un poco más complicado. Necesita saber las dimensiones del div de antemano.

.className{
    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
}

Posicionando el elemento absolutamente , podemos separarlo de su entorno y especificar su posición en relación con la ventana del navegador. Compensación del div en un 50 % desde la parte izquierda y superior de la ventana, tienes su esquina superior izquierda precisamente en el centro de la página. Lo único que nos queda por hacer es mover el div a la izquierda y hacia la cima con la mitad su ancho y alto con margen negativo, para tenerlo perfectamente centrado.

Centrado horizontal y vertical con jQuery

Como se mencionó anteriormente, el método CSS solo funciona con divs con dimensiones fijas. Aquí es donde jQuery entra en juego:

$(window).resize(function(){

    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });

});

// To initially run the function:
$(window).resize();

La funcionalidad se inserta en un $(window).resize() instrucción, que se ejecuta cada vez que el usuario cambia el tamaño de la ventana. Usamos outerWidth() y alturaexterior() , porque a diferencia del width() regular y altura() , agregan el relleno y el ancho del borde al tamaño devuelto. Por último, simulamos un evento de cambio de tamaño para centrar el div en la carga de la página.

El beneficio de usar este método es que no necesita saber qué tan grande es el div. La principal desventaja es que solo funcionará con JavaScript activado. Sin embargo, esto lo hace perfecto para interfaces de usuario ricas (como la de Facebook).

Asegúrese de compartir sus métodos favoritos en la sección de comentarios.