当高度小于容器时垂直居中元素，但当容器高度更小时使高度为 100%答案

【问题标题】：vertically center element when height is smaller than container, but make height 100% when container height is smaller当高度小于容器时垂直居中元素，但当容器高度更小时使高度为 100%
【发布时间】：2017-08-15 21:40:20
【问题描述】：

我正在尝试创建一个布局，其中当元素（.figure）比其容器（.timeline-content）短（高度）时，元素（.figure）居中对齐。但我希望元素在比容器长时与容器具有相同的高度。

容器本身的高度取决于其父级。

This image should help clarify the desired behavior. 这就是我现在所拥有的，我不太明白为什么 img 会超出其父级，即使它的 max-height: 100%

https://jsfiddle.net/kgdkyte4/3/

html{
  position: relative;
}
.timeline-item{
  width: 100%;  
  overflow:hidden
}
.timeline-content{
  width: 50%;
  float: left;
  text-align: right;
}
.timeline-image{
  display:flex;
  align-items: center;
  position:absolute;
  right: 0;
  width: 50%;
  height:100%;
}
.figure{
  width:100%;
  max-height: 100%;
  margin: 0;
  position:relative;
}
img{
  max-height:100%;
  max-width:100%;
  float:left;
}

<div class="timeline-item">
  <div class="timeline-content">
    <h3 class="timeline-title">Blah blah blah
    </h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ornare sem. In sodales ac nisl facilisis pharetra. Nam non pellentesque mauris. Proin scelerisque, sapien non scelerisque auctor, nunc erat condimentum est, viverra dapibus dui odio a neque. Mauris est dui, posuere at urna in, gravida tincidunt odio. Integer quis egestas est. Praesent tincidunt justo nec nibh malesuada ullamcorper. Nulla convallis et quam vitae posuere.
      
    </p>
  </div>
  <div class="timeline-image">
    <figure class="figure">
      <img src="http://via.placeholder.com/550x900">
      <figcaption class="figure-caption">blah
      </figcaption>
    </figure>
  </div>
</div>

【问题讨论】：

设置高度：100%；和 max-height 到 img 的 px 值
@buxbeatz 在哪个元素上？ .figure？
没有实际的 via.placeholder.com/550x900">
将高度设置为 100% 将拉伸图像。你可以在我分享的jsfiddle里试试。
检查这个jsfiddle.net/woptima/kgdkyte4/4你需要设置一个最大高度，单位px，高度：100%；和宽度自动到img

标签： css flexbox vertical-alignment

【解决方案1】：

不知道你想用标题完成什么，this is the closest I've gotten。更新标题上的信息，我会看看我还能做些什么。

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.timeline-item{
  width: 100%;
  position:relative;
}
.timeline-leftbox{
  width:50%;
  text-align:right;
  padding:0 8px;
}

.timeline-rightbox{
  position:absolute;
  height:100%;
  width:50%;
  top:0;
  right:0;
  overflow:hidden;
  white-space:nowrap;
}
.timeline-rightbox::after{
  content:"";
  display:inline-block;
  height:100%;
  width:0;
  vertical-align:middle;
}
.timeline-rightbox img{
  max-height:100%;
  max-width:100%;
  width:auto;
  height:auto;
  vertical-align:middle;
}

<div class="timeline-item">
  <div class="timeline-leftbox">
    <div>
      <h3 class="timeline-title">Blah blah blah</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ornare sem. In sodales ac nisl facilisis pharetra. Nam non pellentesque mauris. Proin scelerisque, sapien non scelerisque auctor, nunc erat condimentum est, viverra dapibus dui odio a neque. Mauris est dui, posuere at urna in, gravida tincidunt odio. Integer quis egestas est. Praesent tincidunt justo nec nibh malesuada ullamcorper. Nulla convallis et quam vitae posuere.
      </p>
    </div>
  </div>
  <div class="timeline-rightbox">
    <img src="http://via.placeholder.com/550x900" />
  </div>
</div>

您可以使用 calc css 在图片下方创建标题空间：

https://jsfiddle.net/freer4/r08ujx5p/3/

【讨论】：