实现盒子居中的另外一种方法：display:table-cell配合vertical-align:middle

实现一个盒子中的内容居中有很多方式，这里介绍一个我不经常用的方法，即display:table-cell配合vertical-align:middle的方式。

.box {
    width: 150px;
    height: 150px;
    border: 1px solid #ededed;
    display: table-cell;
    vertical-align: middle;
}
.box img {
    width: 100%;
    display: block;
}

<div class="box">
    <img src="./images/nav1.jpg">
</div>

效果：