如何在div中垂直居中放置图像？

Question

假设图像为100w x 300h。 但是我的div始终为100x100。 我想将图像居中（以便顶部和底部被切除）

注意：高度将始终是可变的。 并非总是300。

如何在JQuery中做到这一点？

Answer 1

您为什么不只将图像设置为div的背景属性？ 直接的CSS解决方案，无需js ：

.cutoffAndCentered { width: 100px; height: 100px; background: url('image.jpg') no-repeat center center; }

或者，您始终可以通过jQuery执行相同的操作：

$('.myDiv').css('background','url(image.jpg) no-repeat center center');

Answer 2

您应该使用display：table-cell和overflow：hidden;。 本教程应该对http://www.brunildo.org/test/img_center.html有所帮助