Question

我试图让div在父div的中间垂直对齐。我使用bootstrap进行布局。我试图将以下代码放在HTML的容器，行和col级别，但没有运气。

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

Codepen

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

Answer 1

而不是position: relative使用position: absolute：

Revised Codepen

Answer 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%);
  }

转换为平移Y不在中间垂直对齐

2 个答案: