使用平移 Y 进行变换而不在中间垂直对齐答案

【问题标题】：Transform with translate Y not aligning vertically in the middle使用平移 Y 进行变换而不在中间垂直对齐
【发布时间】：2016-08-30 14:32:11
【问题描述】：

我试图让一个 div 在父 div 的中间垂直对齐。我正在使用引导程序进行布局。我尝试将以下代码放在 HTML 的容器、行和列级别，但没有成功。

  .container { // or .row or .col 
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

Codepen

不知道我做错了什么。正如您将在上面的 Codepen 链接中看到的那样，所需的 div 不是在该部分的中间垂直对齐，而是向上移动到“屏幕”顶部的一半上方和一半下方。我已将 % 调整为 100% 而不是 -50%，这会将其从屏幕上移下来，但这没有意义或遵循我见过的其他 Codepen 的代码。

【问题讨论】：

问题是你没有为父元素设置高度，所以设置一个相对于其父元素高度的位置是行不通的。

标签： html twitter-bootstrap css transform

【解决方案1】：

用position: absolute代替position: relative：

Revised Codepen

【讨论】：

【解决方案2】：

  .container {
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
  }

绝对是你想要的。

这可以绝对定位在其父容器中，因为它有一个位置集。

完整解决方案：

  /* PROBLEM ELEMENT */
  .container {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    margin: auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

【讨论】：