html - 变换时平移 Y 未在中间垂直对齐

Question

我试图让一个 div 在父 div 的中间垂直对齐。我正在使用 Bootstrap 进行布局。我尝试将以下代码放在 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 的代码。

Answer 1

不要使用position:relative，而是使用position:absolute:

Revised Codepen