Js实现对齐

使用 CSS Flexbox 实现对齐

Flexbox 是一种现代的布局方式，可以轻松实现水平和垂直对齐。

水平居中
将子元素在父容器中水平居中：

.parent {
  display: flex;
  justify-content: center;
}

垂直居中
将子元素在父容器中垂直居中：

.parent {
  display: flex;
  align-items: center;
}

水平和垂直同时居中

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用 CSS Grid 实现对齐

Grid 布局适用于更复杂的对齐需求。

水平和垂直居中

.parent {
  display: grid;
  place-items: center;
}

使用 JavaScript 动态调整对齐

在某些情况下，可能需要通过 JavaScript 动态计算并调整元素位置。

获取元素尺寸并计算居中位置

function centerElement(element) {
  const parent = element.parentElement;
  const parentWidth = parent.clientWidth;
  const parentHeight = parent.clientHeight;
  const elementWidth = element.offsetWidth;
  const elementHeight = element.offsetHeight;

  element.style.position = 'absolute';
  element.style.left = `${(parentWidth - elementWidth) / 2}px`;
  element.style.top = `${(parentHeight - elementHeight) / 2}px`;
}

使用文本对齐属性

对于简单的文本对齐，可以使用 text-align 和 vertical-align。

水平文本对齐

.text-container {
  text-align: center;
}

垂直文本对齐（适用于行内或表格单元格元素）

.text-cell {
  vertical-align: middle;
}

使用绝对定位和 transform

适用于不知道元素尺寸的情况下居中。

绝对定位 + transform

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

使用 margin 实现块级元素居中

适用于已知宽度的块级元素。

水平居中

.block-element {
  width: 200px;
  margin: 0 auto;
}