Html 通过引导垂直和水平集中

我有三个元素排成一行。最左边是一个按钮，然后在id=slide中有一些图像，然后我有另一个div。html看起来像：

        <div id="display">
            <div class="row">
                <div class="col-lg-3 col-lg-offset-1">
                    <div id="drawMenu" class="center-block">
                        <button type="button" class="btn btn-lg btn-danger" id="erase">Erase</button>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div id="slide">
                    </div>
                </div>
                <div class="col-lg-3">
                    <div id="colorPicker" class="center-block">
                        <div class="color" id="white"></div>
                        <div class="color" id="yellow"></div>
                        <div class="color" id="green"></div>
                        <div class="color" id="blue"></div>
                        <div class="color" id="red"></div>
                        <div class="color" id="black"></div>
                    </div>
                </div>
            </div>
        </div>

.color{
    height:30px;
    width:30px;
    margin: 2px;
    border-radius: 50%;
}

#drawmenu{
    text-align: center;
}
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

我认为唯一有效的方法就是文本对齐：居中

希望这张图片能解释我在找什么。对不起，质量问题。尽我所能用油漆涂好。侧面的灰色部分是偏移

---

谢谢

向这些列添加一个类，以便更有效地定位它们，然后添加以下CSS：

.row{display:block;}
.vertimid{display:inline-block; vertical-align:middle ; height:auto; min-height:100%;}
.vertimid img{width:100%; height:auto;}

---

在Bootply上给出的代码中，这两个东西水平居中，而不是垂直居中。他们俩都被困在顶端。我希望顶部和底部的距离相等。只需单击设备图标，您就会看到它们垂直对齐，我不知道为什么引导预览显示不正确，但在“渲染视图”中，与您的代码一样工作，可供填充的空间实际上已经覆盖了整个高度，但我的问题仍然处于与以前相同的位置。不明白为什么