html - 调整第二列中元素的位置

Question

我如何垂直居中第二列中的元素，如下所示:

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

在这里 fiddle 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;
}