为什么顶级属性不适用于相对位置？答案

【问题标题】：Why is top attribute not working with position relative?为什么顶级属性不适用于相对位置？
【发布时间】：2016-02-18 15:58:08
【问题描述】：

我正在尝试在 div 中垂直对齐 div，我使用了本教程：

.element
{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

它在我目前正在处理的部分上方的一个 div 上工作。然而，现在 top: 50% 什么都不做。这是为什么呢？

这是代码：

<div id="venuerow" class="clearfix row" style="position: relative;">
    <div class="col-sm-12 col-md-6" 
        style="position: relative; top: 50%; transform: translateY(-50%);">
        center this
    </div>
    <div class="col-sm-12 col-md-6">
        1<br>
        2<br>
        3<br>
    </div>
</div>

在这里，我希望 top: 50% 将我的内部 div 向下推，使其从外部 div 的中间开始，然后 transform 应该将其向上移动内部 div 高度的一半。

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。
它有效。检查this
外部元素有（默认）height: auto 和50% 的auto 是0。
太棒了！非常感谢！
@alirezasafian，你介意把你的评论作为这个问题的答案吗？

标签： html css css-position vertical-alignment

【解决方案1】：

它有效。尝试这个： Jsfiddle

 html,
 body,
 #venuerow {
   height: 100%;
   text-align: center;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="venuerow" class="clearfix row" style="position: relative;">
  <div class="col-sm-12 col-md-6" style="position: relative;
             top: 50%; transform: translateY(-50%);">
    center this
  </div>
</div>

【讨论】：

@ivanacorovic 答案已添加。