Center DIV via jQuery

Question

I have a footer that is fixed to the bottom of the viewport. I am using jQuery toggle to open a comment card for users to comment and submit:

$('a#footer-comment').click(function() {
  $("#comment-card").toggle(300);
  return false;
  $('#comment-card').show({ position:);
});

$('a#footer-comment-hide').click(function() {
  $("#comment-card").toggle(300);
  return false;
  $('#comment-card').hide();
});

naturally if i dont add any CSS selectors to #comment-card it shows up UNDER the footer, and out of sight.

So i added: {position:absolute; bottom:30px; left:auto;} 30px so it shows up above the footer which is 30px high.

Problem is, i can not get this to center in the viewport... if i use pixels, depending on the resolution, it is either too far left or right... how do i center this in the viewport?

Answer 1

To center an absolutely positioned element you set its CSS to this:

left:50%;
margin-left:-100px;
position:absolute;
bottom:30px;

margin-left should be 1/2 of the width of the div you are centering, so if the div is 200px wide use -100px for your margin-left. When the margin is negative, it pulls the div in that direction. Since it starts at 50% across the screen, you'll only want to pull it halfway over to center the div on the screen.