如何让父元素div中仅单个子元素p实现垂直居中

下面提供两种符合不同需求的实现方式，均无需修改现有HTML结构：

方案1：p元素相对于整个card容器垂直居中（h1保持在容器顶部） #

通过绝对定位实现，p会完全对齐容器的垂直中线，不受h1位置影响：

.card {
  height: 300px;
  background-color: aquamarine;
  /* 开启相对定位作为子元素定位的参照物 */
  position: relative;
}

.card p {
  position: absolute;
  top: 50%;
  /* 向上偏移自身高度的50%，实现精准垂直居中 */
  transform: translateY(-50%);
  margin: 0; /* 清除p标签默认外边距避免偏移 */
}

如果同时需要水平居中，只需要给.card p补充left: 50%; transform: translate(-50%, -50%);即可。

方案2：p元素在h1下方的剩余空间内垂直居中 #

通过Flex布局实现，h1会正常占据顶部位置，p在剩下的高度范围内居中：

.card {
  height: 300px;
  background-color: aquamarine;
  display: flex;
  flex-direction: column;
}

.card p {
  /* 上下自动外边距会撑满剩余空间，实现垂直居中 */
  margin-block: auto;
}

内容的提问来源于stack exchange，提问作者Hamidreza