如何在CSS中居中图片？现有布局偏移问题求助

你当前的背景图片存在偏移，且需要实现多个div并排同时让背景图片完美居中，下面给出几个可行的CSS解决方案：

方案一：用Flexbox实现便捷布局+背景居中 #

Flexbox是目前处理元素对齐和并排的最优方案，能规避传统布局的诸多兼容问题：

CSS代码 #

.Photos {
  color: black;
  display: flex; /* 启用Flex布局 */
  justify-content: space-around; /* 子元素均匀分布，可选center/space-between调整排列方式 */
  width: 100%;
  height: 450px;
  gap: 20px; /* 子元素间的固定间距，替代margin避免偏移 */
  padding: 0 10px; /* 可选，防止边缘div贴紧页面边界 */
}

.photo1 {
  flex: 1; /* 让每个div平分父容器可用宽度，也可设置固定宽度如25% */
  height: 450px;
  background-image: url(https://optimagas.com/blog/bl-content/uploads/pages/e931fad50039f497fa1b5438c6cd89c9/gazziemny.jpg);
  background-size: cover;
  background-position: center; /* 核心：让背景图片水平+垂直居中 */
}

HTML多div示例 #

<section class="Photos">
  <div class="photo1"></div>
  <div class="photo1"></div>
  <div class="photo1"></div>
  <div class="photo1"></div>
</section>

方案二：修复原有inline-block布局问题 #

如果坚持使用inline-block布局，需解决两个核心问题：背景居中、元素对齐与间隙：

修改后的CSS代码 #

.Photos {
  color: black;
  width: 100%;
  height: 450px;
  text-align: center; /* 让inline-block子元素水平居中 */
  font-size: 0; /* 消除inline-block元素间的默认空白间隙 */
}

.photo1 {
  display: inline-block;
  width: 23%; /* 预留间隙，宽度略小于25% */
  height: 450px;
  background-image: url(https://optimagas.com/blog/bl-content/uploads/pages/e931fad50039f497fa1b5438c6cd89c9/gazziemny.jpg);
  background-size: cover;
  background-position: center; /* 实现背景居中 */
  margin: 0 1%; /* 子元素间的间隙 */
}

关键注意点 #

• background-position: center是背景图片居中的核心属性，可简写也可写为center center明确水平+垂直居中
• Flexbox布局相比inline-block更稳定，无需额外处理元素间隙和对齐的兼容问题
• 若需要背景图片完整覆盖div且不变形，background-size: cover是合适选择；若要完整显示图片，可改用background-size: contain

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