CODEWITHSUNDEEP
jquerycsscenterabsolute
Isis
Isis

Reputation: 4666

CSS absolute div center

How do I center an absolute div?

<div class="photoWindow">min width 600 px, absolute</div>

jQuery

var widthScreen = $(window).width();
$('.photoWindow').css({'margin-left': widthScreen / 2 - widthScreen, 'left':'50%'});

However, this does not center the div.

Upvotes: 1

Views: 2806

Answers (3)

Cadoc
Cadoc

Reputation: 249

Set margin left and margin right to "auto", that should to the trick.

margin-left:auto;
margin-right:auto;

or simply

margin: 0 auto;

Upvotes: 1

Bojangles
Bojangles

Reputation: 101473

Try this:

$(document).ready(function() {
    $("div").css({marginLeft: (($(window).width() / 2) - ($(this).width() / 2))});
});

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

Try this:

function centerMe(element) {
    //pass element name to be centered on screen
    var pWidth = jQuery(window).width();
    var pTop = jQuery(window).scrollTop()
    var eWidth = jQuery(element).width()
    jQuery(element).css('top', pTop + 100 + 'px')
    jQuery(element).css('left', parseInt((pWidth / 2) - (eWidth / 2)) + 'px')
}

Upvotes: 5

Related Questions