div宽高不固定,css垂直居中

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;}