Div 全屏和响应式：垂直居中

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
}

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