如何在Flex容器的子div中垂直居中图片？

嘿，别担心，这绝对是前端新手常遇到的小问题，很容易搞定！咱们一步步来调整你的代码：

问题根源 #

你现在的.our_clients_grid_item是普通块级元素，里面的图片设置margin: auto只能实现水平居中，垂直方向因为父元素没有启用Flex布局，所以没法自动对齐。

解决方案 #

只需要给.our_clients_grid_item添加Flex布局属性，让它内部的图片能利用Flex的居中能力：

修改后的CSS代码 #

.our_clients { 
  width:100%; 
  height:800px; 
  background-color:#3D3D3D; 
  text-align:center; 
} 
.our_clients h3 { 
  color:#FFFFFF; 
  font-size:20px; 
  padding-top:75px; 
} 
.our_clients_auchan { 
  max-width: 131px; 
  max-height: 65px; 
  opacity: 0.1; 
} 
.our_clients_auchan:hover{ 
  opacity:1; 
} 
.our_clients_grid_item { 
  width: 132px; 
  height: 66px; 
  /* background-color: red; */ 
  margin: 14px; 
  /* 添加以下Flex属性实现内部居中 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  /* position: relative;  如果没用到绝对定位可以去掉 */
} 
.our_clients_container { 
  width: 50%; 
  height: 600px; 
  display: flex; 
  justify-content: center; 
  flex-wrap: wrap; 
  margin: auto; 
  align-content: flex-start; 
} 
/* 可以去掉这行，Flex布局已经帮我们完成居中了 */
/* .our_clients_grid_item img { margin: auto; } */

为什么这样有效？ #

• 当.our_clients_grid_item设置为display: flex后，它就变成了Flex容器，内部的图片会自动成为Flex项目。
• align-items: center会让Flex项目在**交叉轴（垂直方向）**上居中对齐。
• justify-content: center会让Flex项目在**主轴（水平方向）**上居中对齐，比margin: auto的方式更稳定可靠。

这样修改后，所有logo都会在各自的格子里完美垂直水平居中，同时保留你设置的max-width和max-height限制，hover时的透明度变化也完全不受影响～

内容的提问来源于stack exchange，提问作者Valeriu Iova