1、绝对定位:
position: absolute; top: 50%; transform: translate(0, -50%);
margin: auto;position: absolute; top: 0; bottom: 0;
2、弹性盒子:
行内元素
display: flex; align-items: center;
块级元素
display: flex; flex-direction: column; justify-content: center;
使用 line-height 和 vertical-align 对图片进行垂直居中
父级:
#box{ width: 300px; height: 300px; background: #ddd; line-height: 300px;}
子级:
#box img { vertical-align: middle;}