如何在不改变宽度/高度的情况下垂直和水平对齐DIV中的图像？

Question

有什么办法吗？使用Javascript / JQuery？我真的非常需要它。任何帮助表示赞赏。

Answer 1

当您不需要时，请不要使用JavaScript。

背景方法

您可以将其设置为背景......

div {
   background: url(/path/to/img.png) no-repeat center center;
}

jsFiddle

---

position: absolute方法

或者你可以绝对定位img ......

div {
   position: relative;
}

div img {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -50px;
   margin-top: -50px;
}

jsFiddle

-50px是图像所尊重维度的一半。

---

display:table-cell和vertical-align: middle方法

您也可以使用vertical-align: middle。

div {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

jsFiddle

请记住，这不起作用＆lt; IE8。

^{还有更多方法可以实现这一目标......}