image - 给定我的代码情况，如何在div内居中放置图像？

<div class="box">
    <div class="pic">
        <img src="/images/img.png" class="img_pic" />
    </div>
</div>

.box {
    border: 1px solid #333;
    cursor: pointer;
    height: 73px;
    margin: 40px 42px 0 0;
    width: 269px;
}
.img_pic {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

我也希望图像（“ img_pic”）也垂直居中。用我所拥有的，我可以水平而不是垂直进行。我尝试了vertical-align: middle;，但是没有用，因为框的高度为line-height: 73px，所以我尝试了73px。我似乎想不出办法。

如何在保持水平居中的同时垂直居中放置图像？

最佳答案

不要使图像成为块元素。作为内联元素，您可以将其作为文本居中。然后将行高设置为与框相同，并将图像的垂直对齐方式设置为middle以将其放置在文本行的中间：

.box {
    border: 1px solid #333;
    cursor: pointer;
    height: 73px;
    margin: 40px 42px 0 0;
    width: 269px;
    text-align: center;
    line-height: 73px;
}
.img_pic {
    vertical-align: middle;
}

演示：http://jsfiddle.net/AwgNy/