.box {
width: 300px;
height: 300px;
display: table-cell;
text-align: center;
vertical-align: middle;
border: solid 1px red;
transition: 1s;
}
.box img {
width: 150px;
height: 150px;
}
.box:hover img {
transform: scale(2);
}
<p class="box"><img src="../img/1.jpg"/></p>
img垂直水平居中为什么会有一像素的空隙：
方法1. 給img加display:block樣式
方法2. 給.box加font-size:0樣式
https://jsfiddle.net/06m9orbL/
那一點空隙是基線來的，結合你的display:table-cell的屬性來看，那個是基線的一半，因為.box的中心會跟裡面的匿名行框中心對齊。
可以看看w3c關於display:table和vertical-align的說明 https://www.w3.org/TR/CSS22/tables.html#height-layout
http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/ 這篇文章是極好的
這跟vertical-align：middle無關，而是跟你的display:table-cell有關，至於原理我也未清楚，不過你在image 中float:left就可以解決空隙
img行內區塊級元素的原因，父元素設font-size:0；可解。還有其他幾個解決方法，可以搜尋一下，手機打字不方便提供傳送門
嗯，樓上的哥們說的都對了，我也遇過。 。 。圖片中的兔子好可愛，哈哈！
網路上有專門討論這個的，一般解是設父元素的font-size:0，好像記得是因為字體的「底線」位置吧。設為0那就不受影響了。同樣的文字居中也不是完全居中的，和它的「底線」位置有關。
https://segmentfault.com/q/1010000004076322/a-1020000004078865
採用通配符*
方法有給box設定font-size:0;
給IMG標籤設定display:block;
或用負margin.或寫flaot.因為元素浮動後也就是display:bolck了