如何在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有所幫助