javascript实现在指定元素中垂直水平居中

实现在指定元素中垂直水平居中的方法有很多，这里介绍两种常用的方法。

方法一：使用绝对定位和transform属性

这种方法需要将要居中的元素的父元素设置为相对定位，目标元素使用绝对定位，并使用transform属性进行位置调整。

HTML代码示例：

<div class="parent">
  <div class="child">居中元素</div>
</div>

CSS代码示例：

.parent {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: gray;
}

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

通过设置top: 50%和left: 50%将目标元素的左上角定位在父元素的中心位置，再通过transform: translate(-50%, -50%)将元素沿着水平和垂直方向各移动自身宽度和高度的一半，从而达到居中的效果。

方法二：使用Flex布局

使用Flex布局可以更简单地实现居中效果。只需要将要居中的元素放在一个Flex容器中，再设置justify-content和align-items属性即可。

HTML代码示例：

<div class="flex-container">
  <div class="flex-item">居中元素</div>
</div>

CSS代码示例：

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: gray;
}

.flex-item {
  width: 100px;
  height: 100px;
}

通过设置display: flex将父元素设置为Flex布局，justify-content: center和align-items: center分别将元素在水平和垂直方向上居中。

这里只是介绍了两种方法，还有其他方法如使用表格布局等，读者可以根据需要选择适合自己的方法。