css3 - img垂直水平居中问题

Question

.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垂直水平居中为什么会有一像素的空隙：

Answer 1

img标签设置display: inline-block;vertical-align: middle;