Cómo centrar un DIV horizontal y verticalmente

Cabe señalar que el DIV al que se hace referencia en este artículo incluye todos los elementos de la página HTML.

El DIV centrado horizontalmente se puede implementar directamente usando CSS. Simplemente configure el ancho del DIV, luego use el margen para configurar los márgenes en 0 automático, y CSS calculará automáticamente los márgenes izquierdo y derecho para centrar el DIV.

.mydiv{margin:0auto;

width:300px;

height:200px;}

Pero si quieres el DIV Centrado verticalmente, me temo que necesitas modificar el CSS.

CSS para implementar el centrado horizontal y vertical

Para centrar un DIV horizontal y verticalmente, primero necesita conocer el ancho y el alto del DIV, y luego establecer la posición en un posición absoluta, ventana de página Establezca la distancia entre el borde izquierdo y el borde superior en 50%. Este 50% es el 50% del ancho y alto de la ventana de la página. Finalmente, mueva el DIV hacia la izquierda y hacia arriba respectivamente. de los movimientos izquierdo y superior es el tamaño del DIV La mitad del ancho y alto.

.mydiv{ancho:300px;

alto:200px;

posición:absoluta;izquierda:50%;arriba:50%;margen:-100px 0 0 -150px}

Este método es muy común, pero requiere que se establezca el ancho y el alto del DIV. Si el ancho y el alto del DIV son dinámicos, por ejemplo, debe abrir una capa DIV y mostrarla en el centro. El contenido del DIV es dinámico, por lo que el ancho y el alto también son dinámicos. necesitas usar jQuery para resolver el problema de centrado.

jQuery implementa centrado horizontal y centrado vertical

El principio de jQuery para lograr el centrado horizontal y el centrado vertical es configurar el DIV a través de jQuery CSS para obtener los desplazamientos de los márgenes izquierdo y superior y los márgenes de el DIV El algoritmo de desplazamiento consiste en restar el ancho del DIV del ancho de la ventana de la página y luego dividir el valor por 2 para obtener el desplazamiento izquierdo y el desplazamiento derecho. El algoritmo para el desplazamiento a la derecha es el mismo. Tenga en cuenta que la configuración CSS del DIV debe completarse en el método resize (), es decir, cada vez que se cambia el tamaño de la ventana, se debe configurar el CSS del DIV, el código es el siguiente:

$(ventana).resize (función (){

$(.mydiv).css({

posición: absoluta,

izquierda : ($(ventana).width() - $(.mydiv).outerWidth())/2,

arriba: ($(window).height() - $(.mydiv).outerHeight ())/2});}) ;

Además, es necesario llamar a resize() cuando se carga la página.

$(function(){

$(window).resize();});

La ventaja de este método es que no necesita para conocer el cielo fuente DIV El tamaño exacto de ancho y alto

.