中心对齐图像和高度内的内容：引导列中的100％div？

Question

我知道这种问题已被多次询问，但我不确定它是否被要求提供灵活的高度div。我已搜查四周，一派，很多解决方案都与position:absolute但通常打破图像的响应性（使图像不width:100%并把它们出列。

，我主要有就是我的div与height:100%和问题我不能让与图像和内容在内的div来定位中心

这里是我的代码：

<div class="container-fluid full-height"> 
    <div class="row full-height"> 
     <div class="col-sm-3 col-md-3 col-lg-3 person-info"> 
      <blockquote> 
       <h1>Stavros Theccharidis</h1> 
       <footer>Cell line Development/Early Process Devellopement</footer> 
      </blockquote> 
      <div class="well"> 
       <h3>Prozessen:</h3><hr/> 
       <h4>Tech Transfer PM Analytic</h4> 
      </div> 
     </div> 
     <div class="col-sm-5 col-md-5 col-lg-5 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 person-photo"> 
      <img class="img-responsive" src="thumbs/andreas.png" /> 
     </div> 
    </div> 
</div> 

所以，我发现工作的任何解决方案是固定高度的div，但我的div的需要100％身高和colu内容mns person-info和person-photo内部的图像中心对齐。

Answer 1

你想要这样的东西吗？中心是否在垂直和水平轴上对齐？

在父用display:flex;align-items: center;justify-content: center;以对准孩子

使用这个，所以你不必兼容性问题与其他浏览器

} 
    display: -webkit-box;  /* iOS 6-, Safari 3.1-6 */ 
    display: -moz-box;   /* Firefox 19 */ 
    display: -ms-flexbox;  /* IE 10 */ 
    display: -webkit-flex;  /* Chrome */ 
    display: flex;    /* Opera 12.1, Firefox 20+ */ 
} 

.person-info,.person-photo { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 

 
}

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/latest/journal/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid full-height"> 
 
    <div class="row full-height"> 
 
     <div class="col-sm-3 col-md-3 col-lg-3 person-info"> 
 
      <blockquote> 
 
       <h1>Stavros Theccharidis</h1> 
 
       <footer>Cell line Development/Early Process Devellopement</footer> 
 
      </blockquote> 
 
      <div class="well"> 
 
       <h3>Prozessen:</h3><hr/> 
 
       <h4>Tech Transfer PM Analytic</h4> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-5 col-md-5 col-lg-5 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 person-photo"> 
 
      <img class="img-responsive" src="http://placehold.it/150x150" /> 
 
     </div> 
 
    </div> 
 
</div>