javascript - 在 Bootstrap 列中垂直居中响应图像

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

这是一个使用转换的选项:

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