Question

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

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

它在我正在进行的那个部分之上的一个部分中工作。但是，现在最高：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的高度。

Answer 1

有效。试试这个： Jsfiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: