Css 引导-DIV中的垂直对齐

我试图垂直居中引导列

“我的尝试”的当前状态：

HTML

<div class="out">
 <div class="inn">
     <div class="col-xs-12 col-sm-6 lft v-align" >
       LEFT
     </div>  
     <div class="col-xs-12 col-sm-6 rght">
        <div style="height: 200px">
           RIGHT
        <div>    
     </div> 
 </div>
</div>

<div class="out">
    <div class="col">
        <div class="lft">
            LEFT
        </div>
    </div>
    <div class="col">
        <div style="height: 200px" class="rght">
            RIGHT
        </div>
    </div>
</div>

我以前试过：

 .col-sm-middle {
    vertical-align: middle;
 }
  .row-sm-height {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}

但这件作品扼杀了立柱的响应行为

我也尝试过：

.vert{
   position: relative;
   text-align: center;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);  
}

这个在引导列上根本不起作用

---

任何帮助都将不胜感激。

Bootstrap的专栏对您的工作毫无帮助。只需使用

表格单元格

技巧，无需使用网格系统：

HTML

<div class="out">
 <div class="inn">
     <div class="col-xs-12 col-sm-6 lft v-align" >
       LEFT
     </div>  
     <div class="col-xs-12 col-sm-6 rght">
        <div style="height: 200px">
           RIGHT
        <div>    
     </div> 
 </div>
</div>

<div class="out">
    <div class="col">
        <div class="lft">
            LEFT
        </div>
    </div>
    <div class="col">
        <div style="height: 200px" class="rght">
            RIGHT
        </div>
    </div>
</div>

如果您希望它具有移动响应功能，则可以将这些表格样式仅应用于特定宽度：

@media (min-width: 992px){
    .out {
        display:table;
        width:100%;
    }
    .col {
        display: table-cell;
        vertical-align: middle;
        width: 50%;
    }
}

---

响应行为在哪里？我在普通div中没有任何问题。我确实设置了col-xs-6，只是因为窗口显示很小。它将在最终结果中设置为col-xs-12 col-md-6。请参阅我的更新。div将在中等屏幕上垂直居中于其父屏幕的一行，并将一个堆叠在另一个之下，放置在任何非常漂亮的SmallerLook上。你太棒了！让我知道，如果你有任何关于这个主题的文章链接。不管怎样，我真的很感谢你的帮助。@Sergio很高兴能帮上忙。