js在div里面div垂直居中

<div class="container">
  <div class="child">居中的内容</div>
</div>

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中（可选） */
  height: 300px; /* 设置容器高度 */
}

.child {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

<div class="container">
  <div class="child">居中的内容</div>
</div>

.container {
  position: relative;
  height: 300px; /* 设置容器高度 */
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

<div class="container">
  <div class="child">居中的内容</div>
</div>

.container {
  display: grid;
  align-items: center; /* 垂直居中 */
  justify-items: center; /* 水平居中（可选） */
  height: 300px; /* 设置容器高度 */
}

.child {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

<div class="container">
  <div class="child">居中的内容</div>
</div>

.container {
  position: relative;
  height: 300px; /* 设置容器高度 */
}

.child {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

function centerElement(element, container) {
  const containerRect = container.getBoundingClientRect();
  const elementRect = element.getBoundingClientRect();
  const top = (containerRect.height - elementRect.height) / 2 + containerRect.top;
  const left = (containerRect.width - elementRect.width) / 2 + containerRect.left;
  element.style.position = 'absolute';
  element.style.top = `${top}px`;
  element.style.left = `${left}px`;
}

const container = document.querySelector('.container');
const child = document.querySelector('.child');
centerElement(child, container);