align-items: center 使 img 消失答案

【问题标题】：align-items: center makes img disappearalign-items: center 使 img 消失
【发布时间】：2017-11-14 00:20:33
【问题描述】：

所以对于网格，当我没有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。

【问题讨论】：

我看到的恰恰相反——它只在设置了align-items 时才会出现。
.align 仅在第二个 div 上。故意的？
@wazz 是为了展示两者的区别。至少，这是我的猜测。
@jhpratt 是的，这是为了显示它出现在一个而不是另一个
另外，HTML 中的 div 类名是“grid align”，而在 CSS 中只是“align”。

标签： html css css-grid

【解决方案1】：

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

当align-items: center 不存在时，align-items: stretch（默认值）有效。这会自动为弹性项目（div）提供全高。

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

通过设置弹性项目的高度来解决问题。

.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;
}

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

更多细节在这里：

【讨论】：

hmm，但是文字不再居中，这是我使用align-items: center的初衷。我想我只需要在span 上使用绝对位置即可。但这回答了问题。
不需要绝对定位。这适用于 Chrome 和 Firefox：jsfiddle.net/yzoj5f8f/6