javascript - 在列的 div 内垂直居中图像

Question

这是我目前拥有的:

            <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

Answer 1

试试这个:

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>