js 实现 图片居中

使用 CSS Flexbox 实现图片居中

Flexbox 是一种现代的布局方式，可以轻松实现图片居中。将图片容器设置为 Flex 布局，并通过 justify-content 和 align-items 属性控制水平和垂直居中。

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100vh;           /* 设置容器高度 */
}

img {
  max-width: 100%;         /* 防止图片溢出 */
}

使用 CSS Grid 实现图片居中

Grid 布局同样可以高效实现居中效果。通过 place-items 属性可以同时控制水平和垂直居中。

.container {
  display: grid;
  place-items: center;     /* 水平和垂直居中 */
  height: 100vh;
}

img {
  max-width: 100%;
}

使用绝对定位实现图片居中

通过绝对定位和 transform 属性，可以将图片精准定位到容器中心。

.container {
  position: relative;
  height: 100vh;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
}

使用 JavaScript 动态计算居中位置

如果需要通过 JavaScript 动态计算图片位置，可以通过获取容器和图片的尺寸，计算偏移量。

function centerImage() {
  const container = document.querySelector('.container');
  const img = document.querySelector('img');

  const containerWidth = container.offsetWidth;
  const containerHeight = container.offsetHeight;
  const imgWidth = img.offsetWidth;
  const imgHeight = img.offsetHeight;

  img.style.position = 'absolute';
  img.style.left = `${(containerWidth - imgWidth) / 2}px`;
  img.style.top = `${(containerHeight - imgHeight) / 2}px`;
}

window.addEventListener('load', centerImage);
window.addEventListener('resize', centerImage);

使用 text-align 和 line-height 实现简单居中

对于行内元素或简单布局，可以通过 text-align 和 line-height 实现水平或垂直居中。

.container {
  text-align: center;      /* 水平居中 */
  line-height: 100vh;      /* 垂直居中（需与高度一致） */
}

img {
  vertical-align: middle;  /* 确保垂直对齐 */
}

注意事项

• 使用 Flexbox 或 Grid 时，确保浏览器支持这些特性。
• 绝对定位方式需要容器有明确的尺寸（如 height: 100vh）。
• JavaScript 动态计算方式适用于响应式布局，但可能增加性能开销。