为什么 top 属性不适用于相对位置？

Question

我试图在 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 的中间开始，然后转换应该将它向上移动到内部 div 的一半=26=]的身高。

Answer 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>

为什么 top 属性不适用于相对位置？

Why is top attribute not working with position relative?

html

css

css-position

vertical-alignment