我有一个包含图片标签的部分。图片标签是使用srcSet图像集完成的，以进行响应式设计，并使用多张图片，而无需下载未使用的图片。
[我们需要将文本放在所述容器的中心，所以我有一个display: grid位于其中的div。这是绝对位置，并使用height: 100%和width: 100%。
在孩子身上使用align-self: center可以在Chrome和Firefox上完美运行，但并不奇怪，Safari决定不合作。我发现，如果将区域（或网格）设置为设定的高度（即height: 5000px），则实际上它会与div的中心对齐，这使我认为Safari不想将其设为align-self: center且未知尺寸分区。
有多种解决方法，但是我们使用自己的使用网格的库，这就是为什么我想使用align-self: center来解决它，因为我们可以将prop传递给React Component。
你们知道解决方法吗？
我在这里留下了一个小提琴。如果您在Chrome或Firefox上访问它，则可以使用，但如果在Safari中访问，则不能。我还注释了一行，我在其中设置了一个特定的高度以证明它可以在Safari上使用。
谢谢！
.container {
position: relative;
}
.grid {
position: absolute;
height: 100%;
/* height: 1000px; */
width: 100%;
top: 0;
background-color: rgba(255, 255, 255, 0.75);
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.cell {
grid-column: 1 / span 1;
align-self: center;
}
img {
width: 100%
}<div class='container'>
<img src='https://cdn.contexttravel.com/image/upload/c_fill,q_60,w_2600/v1553227874/production/city/hero_image_27_1553227874.jpg' />
<div class='grid'>
<div class='cell'>
Hello
</div>
</div>
</div>问题是，除非父级的高度已定义，否则Safari无法识别高度的百分比。那是老式的CSS。其他浏览器已经超出了此要求，现在接受了其他有关百分比高度的参考。
因此，如果您要在.grid上使用百分比高度，则父级需要固定高度才能在Safari上使用。或者，在祖先直到根元素的整个高度上设置百分比高度。
/* NEW */
html, body, .container, img {
height: 100%;
}
.container {
position: relative;
}
.grid {
position: absolute;
height: 100%;
/* height: 1000px; */
width: 100%;
top: 0;
background-color: rgba(255, 255, 255, 0.75);
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.cell {
grid-column: 1 / span 1;
align-self: center;
}
img {
width: 100%
}<div class='container'>
<img src='https://cdn.contexttravel.com/image/upload/c_fill,q_60,w_2600/v1553227874/production/city/hero_image_27_1553227874.jpg' />
<div class='grid'>
<div class='cell'>
Hello
</div>
</div>
</div>更多详细信息：