如何在不改变宽度/高度的情况下垂直和水平对齐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.

请记住,这将无法正常工作<IE8.

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