jquery 居中

jQuery 实现元素居中

水平居中
对于块级元素（如div），通过设置margin: 0 auto实现水平居中，需确保元素有固定宽度：

$("#element").css({
  "width": "200px",
  "margin": "0 auto"
});

垂直居中
使用绝对定位结合transform实现未知高度的垂直居中：

$("#element").css({
  "position": "absolute",
  "top": "50%",
  "transform": "translateY(-50%)"
});

水平垂直居中
结合上述方法，通过绝对定位和transform实现：

$("#element").css({
  "position": "absolute",
  "top": "50%",
  "left": "50%",
  "transform": "translate(-50%, -50%)"
});

Flexbox 方案
现代浏览器推荐使用Flex布局，通过jQuery动态添加类名或直接设置CSS：

$("#parent").css({
  "display": "flex",
  "justify-content": "center",
  "align-items": "center"
});

动态调整居中
窗口大小变化时重新计算居中位置：

$(window).resize(function() {
  $("#element").css({
    "left": ($(window).width() - $("#element").outerWidth()) / 2,
    "top": ($(window).height() - $("#element").outerHeight()) / 2
  });
}).trigger("resize");

注意事项

• 绝对定位需确保父元素非static定位。
• Flexbox兼容性较好，但需考虑旧版本浏览器前缀。
• 动态内容需在内容加载完成后执行居中操作。