Css 垂直对齐引导3中两个堆叠选择之间的一组按钮

我正在使用Bootstrap3模式实现角色分配权限屏幕。在全屏模式下，选择的内容不会堆叠在一起，而是对齐在一边。如您所见，现在按钮粘贴到顶部，但我想将它们放在modal中心的一列中：

代码很简单，详细信息如下：

<div class="modal-header">
  <h3 class="modal-title">Role permissions</h3>
</div>
<div class="modal-body">
  <div class="row">
    <div class="col-md-5 form-group">
      <label for="availablePermission">
        Available permissions
      </label>
      <select id="availablePermission" class="form-control" size="14">
        <optgroup label="General">
          <option value="0">Change password</option>
          ...
        </optgroup>
      </select>
    </div>
    <div class="col-md-2">
      <button class="btn btn-primary">
        <i class="fa fa-fw fa-angle-right"></i>
      </button>
      <button class="btn btn-primary">
        <i class="fa fa-fw fa-angle-left"></i>
      </button>
    </div>
    <div class="col-md-5 form-group">
      <label for="existingPermission">
        Assigned permissions
      </label>
      <select id="existingPermission" class="form-control" size="14">
        <optgroup label="General">
          <option value="1">View users</option>
          ...
        </optgroup>
      </select>
    </div>
  </div>
</div>
<div class="modal-footer">
  <button class="btn btn-primary">OK</button>
  <button class="btn btn-warning">Cancel</button>
</div>

角色权限
可用权限
更改密码
...
分配的权限
查看用户
...
好啊
取消

---

我试过使用flexbox作为中间列，带有

display:flex

和

flex direction:column

，但按钮没有移动任何像素<代码>显示：表格单元格和

垂直对齐：中间

也不起作用。是否可以在不使用硬编码尺寸的情况下对其进行漂亮的居中调整？

由于您可能知道两个按钮的高度，因此可以执行以下操作：

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: THEWIDTHpx;
height: THEHEIGHTpx;

您还需要放置

位置：relative到行。这将在框的中间用2个按钮对盒子进行定位。

如果您使用浮点数将div放在彼此相邻的位置，请确保该行有一个clearfix。
设法使其与flexbox一起工作，但失去了一点自适应性：尝试更改宽度-选择现在不会垂直堆叠：（添加
@media
查询（类似于Bootstrap的
*-md
）将解决此问题

  @media (min-width: 992px) {
    .flex-row {
      display: flex; 
    }
  }

  .flex-col {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
  }

这篇文章有什么价值吗？我知道我可以为按钮包装指定固定高度，并使用负边距，但为什么flexbox不起作用？我认为这是一种进行垂直对齐的现代方法…谢谢你的回复，Zenorbi！从来没有想过浮动。我看到bootstrap使用浮动。有什么问题吗？如果你不清除固定行，该行的高度将为0，因为浮动不参与容器布局。因为它的高度为0，相对于该行的绝对定位将产生不需要的结果。但实际上我不知道按钮块的高度。稍后可能会有三个或四个。我可以强制第二列的高度与第三列和第一列的高度？也许flexbox会起作用？我注意到第二列只包装内容，而不跨越整个可用高度。在这种情况下，这将有点困难。在IE9+中，有一种方法可以做到这一点，使用top:50%；left:50%；transform:translateX（-50%）translateY（-50%）；没有宽度、高度、右边、底部和边距，但是如果你需要IE8，你需要内联块破解：非常感谢你的无价努力，Aiwan，但我已经设法使它与flexbox一起工作了。