1、絕對(duì)定位：

position: absolute; top: 50%; transform: translate(0, -50%);

margin: auto;position: absolute; top: 0; bottom: 0;

2、彈性盒子：

行內(nèi)元素

display: flex; align-items: center;

塊級(jí)元素

display: flex; flex-direction: column; justify-content: center;

使用 line-height 和 vertical-align 對(duì)圖片進(jìn)行垂直居中

父級(jí)：

#box{ width: 300px; height: 300px; background: #ddd; line-height: 300px;}

子級(jí)：

#box img { vertical-align: middle;}