Como centrar un div con jQuery

Para lograr centar horizontal y verticalmente un elemento en una página web podemos usar CSS, pero si necesitamos que este elemento quede centrado al redimensionarse la ventana y para ello la mejor opción es jQuery ya que así el elemento se ajusta al ancho y al alto de la ventana cada vez que ésta se redimensiona.

Otra ventaja es que no hay necesidad de usar ni reglas ni otras propiedades en el código CSS, simplemente debemos tener el formato que le queremos aplicar al elemento.

El código para esto es:

<div class="alpha">
<h1>Div centrado con jQuery solamente</h1>
</div>

Con este código CSS le aplicamos un formato bastante sencillo al elemento y además definimos el largo y el ancho del mismo.

.alpha{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:   10px rgba(, , , 0.5);
-webkit-box-shadow:   10px rgba(, , , 0.5);
box-shadow:   10px rgba(, , , 0.5);
height: 150px;
background-color:#FFF;
width: 270px;
padding:10px;
text-align:center;
display:none;
}

Se utiliza el display:none para esconder el elemento evitando así que este se vea antes de centrarlo con jQuery.Y finalmente el código jQuery que dará el resultado que buscamos:

$(document).ready(function () {
$(window).resize(function () {
$('.alpha').css({
position: 'absolute',
display: 'inline',//mostramos el elemento
left: ($(window).width() - $('.alpha').outerWidth()) / 2,
top: ($(window).height() - $('.alpha').outerHeight()) / 2
});
});
// Corremos nuestra nueva funcion
$(window).resize();
});

Con el artibuto position:absolute nos aseguramos de ocupar toda la pantalla, luego mostramos el elemento (.alpha) con display ya que antes estaba “escondido”.

Lo que se hace luego es calcular el largo y ancho de la pantalla para obtener los valores que se utilizarán en top y left y con ello centrar nuestro elemento.

Para que esta función de jQuery funcione el usuario que visita nuestra página debe tener activado JavaScript, caso contrario el elemento no se va a ver ya que en CSS lo “escondimos”

Si quieren ver un ejemplo funcionando pueden hacerlo acá

Fuente | Eliseos