调整第二列中元素的位置

Question

如何将第二列中的项目垂直居中，如下所示：

我正在使用 Bootstrap 3 ，并且似乎并没有明确的方法来实现这一目标。

在此处https://jsfiddle.net/sqygt2gt/3/。

<div class="row remove-row-margins">
    <div class="col-sm-6">
        <div class="fluid-media">
        <iframe src="https://www.youtube.com/embed/QyIIeQbL1Zo" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
        </iframe>
        </div>
    </div>
    <div class="col-sm-6">
        <div style="text-align: center; margin-bottom: 2em">
            <h3 style="margin-top: 0px;">Get in touch to create your account today</h3>
        </div>
        <form>
            <div class="form-group">
                <input class="form-control" placeholder="Brand Name">
            </div>
            <div class="form-group">
                <input class="form-control" placeholder="Email">
            </div>
            <div class="form-group">
                <input class="form-control" placeholder="Contact Number">
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-block">Sign up</button>
            </div>
        </form>
    </div>
</div>

Answer 1

尝试在 .remove-row-margins 中使用 flex 。使用 align-items: center 垂直对齐项目中心。

  

<强> More help to understand flex

<强> Updated Fiddle

.remove-row-margins {
  margin-right: 0px;
  margin-left: 0px;
  display: flex;
  align-items: center;
}