中心對齊圖像和高度內的內容：引導列中的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>