align-items：居中会使img消失

Question

因此，使用网格时，当我没有align-items: center;img时，align-items: center;它可以正常显示，但是一旦添加，它就会突然消失。是什么导致此问题？

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100px;
}

img {
  display: block;
  max-height: 100%;
  margin: 0 auto;
}

.align {
  align-items: center;
}

<div class="grid">
  <div>
    <span>text</span>
  </div>
  <div>
    <img src="http://via.placeholder.com/650x1050" />
  </div>
</div>

<div class="grid align">
  <div>
    <span>text</span>
  </div>
  <div>
    <img src="http://via.placeholder.com/650x1050" />
  </div>
</div>

这似乎是Chrome问题。它也不适用于Firefox上的img。

Answer 1

这是因为百分比高度在浏览器中呈现的方式。

当align-items: center不存在时，align-items: stretch（默认值）有效。这会自动赋予 flex 项目 (the div) 全高。

但是当align-items: center存在时，它垂直居中 div。div 的子元素imgwithmax-height: 100%实际计算为height: auto，因为父元素（div flex 项）没有高度参考。

该问题通过在 flex 项目上设置高度来解决。

.grid > div {
  height: 100%;
}

.grid > div {
  height: 100%;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100px;
  border: 1px solid red;
}

.grid>div {
  height: 100%;
}

img {
  display: block;
  max-height: 100%;
  margin: 0 auto;
}

.align {
  align-items: center;
}

更多细节在这里：

• 使用 CSSheight属性和百分比值
• Chrome / Safari 未填充 100% 的 flex 父级高度