jquery img居中

问题描述：

在前端开发中，我们经常会遇到需要将图片居中显示的需求。对于使用jQuery的开发人员来说，如何使用jQuery实现图片居中显示是一个常见问题。

解决方案：

要实现图片居中显示，我们可以使用jQuery的CSS方法和一些计算来实现。下面是一个简单的示例代码，演示了如何通过jQuery居中显示一张图片：

$(document).ready(function() {
  // 获取图片宽度和高度
  var imgWidth = $("img").width();
  var imgHeight = $("img").height();

  // 获取父容器宽度和高度
  var parentWidth = $("img").parent().width();
  var parentHeight = $("img").parent().height();

  // 计算居中位置
  var leftPos = (parentWidth - imgWidth) / 2;
  var topPos = (parentHeight - imgHeight) / 2;

  // 设置图片样式
  $("img").css({
    "position": "absolute",
    "left": leftPos,
    "top": topPos
  });
});

代码解释：

上面的代码使用了jQuery的.ready()方法，保证了代码在DOM加载完成后执行。

首先，我们通过jQuery选择器获取了要居中显示的图片的宽度和高度以及其父容器的宽度和高度。

然后，我们使用了简单的数学计算来确定图片居中的位置。通过将父容器的宽度和高度减去图片的宽度和高度，并除以2，获取到居中位置的左偏移量(leftPos)和上偏移量(topPos)。

最后，通过使用jQuery的css()方法，将图片的“position”属性设置为“absolute”，并将其左偏移量和上偏移量设置为计算得到的值，实现了图片的居中显示。

总结：

通过以上的代码和解释，我们可以利用jQuery的CSS方法和一些简单的计算，实现图片居中显示的效果。这种方法简单易懂，适用于大多数的图片居中需求，希望对你有所帮助。