一个div 在一个div垂直居中的位置

有多种方法可以将一个 div 垂直居中，以下是其中几种常见的方法：

1. 使用 flexbox 布局

<div class="container">
  <div class="centered">Content goes here</div>
</div>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 设置容器高度 */
}

.centered {
  /* 设置需要垂直居中的元素 */
}
</style>

2. 使用绝对定位和 transform

<div class="container">
  <div class="centered">Content goes here</div>
</div>

<style>
.container {
  position: relative;
  height: 100vh; /* 设置容器高度 */
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 设置需要垂直居中的元素 */
}
</style>

3. 使用表格布局（不推荐）

<div class="container">
  <div class="centered">Content goes here</div>
</div>

<style>
.container {
  display: table;
  width: 100%;
  height: 100vh; /* 设置容器高度 */
}

.centered {
  display: table-cell;
  vertical-align: middle;
  /* 设置需要垂直居中的元素 */
}
</style>

注意，以上方法中，容器的高度需要设置为固定值（如 100vh），或者是通过 JavaScript 动态计算得到。