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

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 克服垂直对齐问题。

将"vertical_center“类添加到父div。

然后添加以下css

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

Answer 3

希望这能解决你的问题。使用以下CSS属性使图像垂直居中

img { vertical-align: middle; }

对于水平对齐，请使用bootstrap的类名text-center以及div的其他类名(如果有)。喜欢,

<div class="col-md-2 text-center"> ... </div>。

它将使div的内容水平居中。