通过 jQuery 居中 DIV答案

【问题标题】：Center DIV via jQuery通过 jQuery 居中 DIV
【发布时间】：2011-01-25 01:56:00
【问题描述】：

我有一个固定在视口底部的页脚。我正在使用 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();
});

如果我不向#comment-card 添加任何 CSS 选择器，它自然会显示在页脚下方，并且看不见。

所以我添加了：{position:absolute; bottom:30px; left:auto;} 30px，所以它显示在 30px 高的页脚上方。

问题是，我不能让它在视口中居中...如果我使用像素，取决于分辨率，它要么太左要么太右...我如何在视口中居中？

【问题讨论】：

标签： jquery html center

【解决方案1】：

要将绝对定位的元素居中，请将其 CSS 设置为：

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

margin-left 应该是你居中的 div 宽度的 1/2，所以如果 div 是 200px 宽，使用 -100px 作为你的 margin-left。当边距为负时，它会将 div 拉向该方向。由于它从屏幕上的 50% 开始，您只需将其拉到一半以使 div 在屏幕上居中。

【讨论】：