CSS浮动div容器内图片无法垂直居中问题求解

问题根源 #

你的样式失效来自CSS固有规则冲突：给元素设置float属性后，其display计算值会被强制转为block，你写的display: table-cell会被直接覆盖，依赖table-cell生效的vertical-align: middle垂直居中规则自然完全失效，这就是添加float后图片垂直居中失效的核心原因。
如果移除float属性，table-cell元素默认会在同一行排列、不会自动折行，也不符合你要的浮动换行效果。

修正方案（无flex/grid，仅使用基础CSS实现） #

不需要修改原有HTML结构，仅调整CSS即可：保留float: left实现容器横向排列、空间不足自动换行的效果，用兼容性最好的行内块+伪元素方案实现任意尺寸图片的水平+垂直居中。
完整CSS代码如下：

.wraptocenter {
  float: left;
  width: 200px;
  height: 200px;
  margin: 5px;
  background-color: yellow;
  border: 1px solid black;
  text-align: center;
  font-size: 0;
}
/* 伪元素生成垂直居中参照基准 */
.wraptocenter::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.wraptocenter img {
  display: inline-block;
  vertical-align: middle;
  /* 以下两行可选，避免大图超出容器边界，不需要可删除 */
  max-width: 100%;
  max-height: 100%;
}

原有HTML结构不需要任何改动，直接使用即可。

实现效果 #

• 所有.wraptocenter容器靠左依次排列，一行剩余空间不足时自动换行到下一行
• 容器内不管什么尺寸的图片，都会自动保持水平、垂直居中
• 没有使用flex、grid等特殊布局，所有属性都是CSS2.1标准属性，兼容全版本主流浏览器
• 可选的图片尺寸限制规则，可以避免尺寸大于200px的图片撑破容器边框

内容的提问来源于stack exchange，提问作者Andrew Truckle