js实现div居中

使用 Flexbox 布局实现居中

将父容器设置为 Flex 布局，通过 justify-content 和 align-items 属性实现水平和垂直居中。

<div class="container">
  <div class="centered-div">居中内容</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 确保容器有高度 */
}

使用 Grid 布局实现居中

利用 CSS Grid 的 place-items 属性快速实现居中效果。

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

使用绝对定位实现居中

通过绝对定位结合 transform 属性实现精准居中。

.centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用 JavaScript 动态计算居中

通过 JavaScript 动态计算位置实现居中，适用于需要动态调整的场景。

<div id="centeredDiv">动态居中内容</div>

function centerDiv() {
  const div = document.getElementById('centeredDiv');
  const windowHeight = window.innerHeight;
  const windowWidth = window.innerWidth;
  const divHeight = div.offsetHeight;
  const divWidth = div.offsetWidth;

  div.style.position = 'absolute';
  div.style.top = (windowHeight - divHeight) / 2 + 'px';
  div.style.left = (windowWidth - divWidth) / 2 + 'px';
}

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

使用文本居中实现简单居中

适用于单行文本或行内元素的简单居中方案。

.container {
  text-align: center;
  line-height: 100vh; /* 垂直居中 */
}

使用 margin 自动实现水平居中

通过设置左右 margin 为 auto 实现水平居中，需指定宽度。

.centered-div {
  width: 50%;
  margin: 0 auto;
}

以上方法可根据具体需求选择，Flexbox 和 Grid 是现代布局的首选方案，兼容性良好且代码简洁。