javascript - 将图像垂直居中放置在div的列中

这是我目前拥有的：

            <div class="col-lg-10 col-lg-offset-1 text-center">
                <h2>Title</h2>
                <hr class="small">
                <div class="row">
                    <div class="col-md-6" id="logo">
                        <div class="portfolio-item">
                            <img class="img-portfolio img-responsive" src="logo.jpg">
                        </div>
                    </div>
                    <div class="col-md-5" id="description">
                        <div class="portfolio-item">
                              Text
                        </div>
                    </div>
                </div>

我希望能够将图像居中在左侧的列中，但是我不确定如何。我在这里尝试遵循此方法，但无法正常工作。
How to vertically align an image inside div

最佳答案

尝试这个：
http://codepen.io/tiagofabre/pen/LNagaB
在此链接中也有一篇关于flex的很棒的文章：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.vertical-center {
  min-height: 100%;
  min-height: 100vh;

  display: flex;
  align-items: center;
}

<div class="col-lg-10 col-lg-offset-1 text-center">
  <h2>Title</h2>
  <hr class="small">
  <div class="container-fluid col-md-6 vertical-center">
    <div class="col-sm-12 bg-green">
      <img class="img-responsive center-block" src="http://placeimg.com/100/100/animals" />
    </div>
  </div>
  <div class="container-fluid col-md-6 vertical-center">
    <div class="col-sm-12 bg-green">
      <div class="portfolio-item">Text</div>
    </div>
  </div>
</div>