不定宽高div内图片垂直居中的css样式

如果你想让图片在`div`元素中垂直居中，最直观的方式就是通过设置外层元素的CSS属性。这是一种简单而直接的方法。

代码示例如下：

```css

div {

display: table-cell;

text-align: center; / 确保图片水平居中 /

}

```

需要注意的是，IE6/7这两个老版本的Internet Explorer并不支持`display: table-cell`这样的CSS样式。为了在这些老版本的浏览器中也能实现良好的兼容性，我们可以采用一些狼蚁网站SEO优化的策略。

在HTML结构中，我们可以这样写：

```html

```

然后，通过以下的CSS样式设置，我们可以实现图片在`div`中的垂直居中：

```css

div {

width: 100px;

height: 100px;

border: 1px solid ccc;

display: flex; / 使用Flexbox布局，可以轻松实现垂直居中 /

align-items: center; / 使子元素在交叉轴上居中对齐 /

}

span { / 这个span标签是为了撑高行高 /

line-height: 100%; / 设置行高为容器的百分比 /

vertical-align: middle; / 设置垂直居中对齐 /

display: inline-block; / 让span像块级元素一样显示 /

height: 100%; / 设置高度为容器的百分比 /

}

img { / 图片的样式设置 /

width: 100%; / 设置图片宽度为容器宽度的百分比 /

vertical-align: middle; / 设置垂直居中对齐 /

}

```