html - Div 全屏响应 : vertical centering

Question

我有一个包含图像的 div。

我的图像比例不适合常规屏幕，因此我希望它是全宽的，因为我知道会有垂直溢出。

问题是我无法将其垂直居中。

我不能使用负边距，因为我希望这个系统能够响应。

我考虑过使用 jquery 脚本计算屏幕分辨率，然后设置负边距顶部，但如果有人知道如何在 css 中执行此操作，那就太好了。

谢谢你的帮助

Answer 1

您可以通过在 y 轴上变换图像来完成此操作:

img{
    top:50%; // move the top of the image to the vertical center of the parent
    transform:translateY(-50%); // offset the top of the image by half its height, thereby 'true' vertical centering it within the parent
}

注意。如果您在执行此操作时遇到问题，您可能需要为图像和父级设置一个位置。