在引导列中垂直居中响应图像

Question

我已经审查了所有现有的问题/答案,但仍然无法获得有效的解决方案,所以我将不胜感激以下对我的特定代码的任何评论.

我宁愿不在我的代码中使用硬编码图像大小(像素计数),我愿意在解决方案中使用Less,CSS或Javascript的组合.

图像应在Bootstrap列中垂直和水平居中,即使屏幕调整大小,也应保持居中.

我的HTML:

<div class="container-fluid">
    <div class="container">
    <div class="row">
        <div class="col-md-5">
            <div class="panel">
                Some content
            </div>
        </div>

        <div class="col-md-2">
            <img src="images/myimage.png" class="img-responsive center-block">
        </div>

        <div class="col-md-5">
            <div class="panel>
               Some content
            </div>
        </div>
     </div>
     </div>
 </div>

Answer 1

这是使用transform的选项:

html,body,.container-fluid,.container,.row,.row div {height:100%;;} /* full height for demo purposes */
.vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.col-md-2 {background-color:#ccc;} /* just to demonstrate the size of column */

http://www.bootply.com/YG8vpg1rIf

Answer 2

您可以使用css Flexbox克服垂直对齐问题.

将类"vertical_center"添加到父div.

然后添加以下css

.vertical_center {
    display: flex;
    align-items: center;
}