能否使用calc设置margin-top使文本容器内的内容向下偏移？

1. 当前代码的核心问题 #

• calc语法错误：CSS的calc()函数要求运算符+/-前后必须保留空格，你写的-50%没有空格，会直接导致表达式失效。即使修正语法，还有第二个关键问题。
• 百分比参考逻辑错误：CSS中margin/padding的垂直百分比（如margin-top: 100%）是相对于父元素的宽度，而非高度。你想基于父容器的75vh高度计算垂直偏移，用margin-top的百分比完全达不到预期效果。

2. 正确实现方式 #

由于父容器.container已设置固定高度75vh，推荐两种可靠的垂直偏移方案：

方案一：绝对定位 + calc（精准可控） #

给父容器添加相对定位，让子元素的绝对定位以它为参考，此时top属性的百分比会基于父容器高度计算：

.container {
  height: 75vh;
  position: relative; /* 建立定位上下文，让子元素绝对定位以它为基准 */
}

.page-titles-container {
  position: absolute;
  /* 示例：从父容器顶部偏移50%高度后再减去150px，可根据需求调整表达式 */
  top: calc(50% - 150px);
  /* 若需要水平居中，可追加：left: 50%; transform: translateX(-50%); */
}

方案二：margin-top结合vh单位 #

直接用父容器的高度单位vh计算，无需依赖百分比：

.page-titles-container {
  /* 示例：偏移量为75vh的50%减去150px，和方案一效果一致 */
  margin-top: calc((75vh * 0.5) - 150px);
}

3. 进阶需求示例 #

如果需要让.page-titles-container在父容器内垂直居中后再向下偏移特定距离（比如居中后再往下100px），可以这样写：

.page-titles-container {
  position: absolute;
  top: 50%;
  /* 先向上拉自身高度的50%实现垂直居中，再向下偏移100px */
  transform: translateY(calc(-50% + 100px));
  left: 0; /* 可根据需求调整水平位置 */
}

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