Разбивка по центру с помощью jQuery

Question

У меня есть нижний колонтитул, который прикреплен к нижней части окна просмотра.Я использую jQuery toggle, чтобы открыть карточку комментариев, чтобы пользователи могли комментировать и отправлять:

$('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();
});

естественно, если я не добавлю никаких CSS-селекторов в #comment-card, он появится ПОД нижним колонтитулом и исчезнет из поля зрения.

Поэтому я добавил: {position:absolute; bottom:30px; left:auto;} 30 пикселей, таким образом, он отображается над нижним колонтитулом высотой 30 пикселей.

Проблема в том, что я не могу расположить это по центру в окне просмотра...если я использую пиксели, в зависимости от разрешения, они будут либо слишком далеко слева, либо справа...как мне центрировать это в окне просмотра?

Answer 1

Чтобы центрировать абсолютно позиционированный элемент, вы устанавливаете для его CSS значение this:

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

ширина левого поля должна составлять 1/2 ширины центрируемого элемента, поэтому, если div имеет ширину 200 пикселей, используйте -100px для вашего поля слева.Когда маржа отрицательна, это подтягивает div в этом направлении.Поскольку он начинается с 50% по экрану, вам нужно будет сдвинуть его только наполовину, чтобы выровнять div по центру экрана.