如何在CSS中让图片在div内居中？已尝试text-align和flex无效

AI 小北

2026-7-12

图片在div容器内居中失效的解决办法

尝试用text-align: center;和display: flex; justify-content: center;让图片在.grid2容器内居中但没生效，核心问题和解决步骤如下：

问题根源

.grid2设置了float: left;，浮动会使元素脱离正常文档流，直接破坏flex布局和text-align的居中逻辑。
.grid2同时定义了height:24px和min-height:62px，实际容器高度为62px，若要实现垂直居中还需额外配置。

解决方案

移除.grid2的float: left;：父元素.grid1已经是Grid布局，子元素无需浮动即可自动排列。
用Flex实现双向居中：给.grid2添加display: flex; align-items: center; justify-content: center;，同时删除无效的height设置。

修改后的CSS代码

.box {
  position: relative;
  clear: both;
  padding: 13px;
  background-color: #fff;
  border-radius: 0px 8px 8px 8px;
  height: 100%;
  min-height: 25px;
}

.grid1 {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0px;
  border: 1px solid black;
  min-width: 97.5px;
  height: auto;
  margin-left: 12px;
  float: left;
}

.grid2 {
  margin: 3px 1px 1px 1px;
  border: 1px solid red;
  font-size: 7px;
  width: 23.4px;
  min-height: 62px;
  /* 启用Flex布局实现水平+垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid3 {
  margin: 3px 1px 1px 1px;
  border: 1px solid red;
  height: 62px;
  font-size: 7px;
  min-width: 64.35px;
  float: left;
}