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
}

NB。如果您在实现此问题时遇到问题，则可能需要为图像和父级设置position。