使用Flexbox时图片未在Div中居中的问题排查

你的底部图片偏移，核心问题出在flex布局的元素宽度不对称以及logo容器的宽度设置和图片尺寸控制不足：

1. 左右国家标识的宽度不一致
   你给底部的columns设置了justify-content: space-between，这个属性会让第一个元素贴容器左边缘、最后一个元素贴右边缘，元素之间的空隙平均分配。但你的.country类没有固定宽度，它的宽度由内部文字（RUS/ISR）+ padding决定。如果两个国家代码的文字宽度在当前字体（Impact）下有差异（比如字母"I"比"S"窄），就会导致左右.country的实际宽度不一样，中间的logo自然会偏离屏幕中心。

2. Logo容器的宽度设置与图片尺寸不匹配
   你给.logo设置了固定的width: 6vw，但里面的<img>没有设置尺寸限制。如果图片本身的宽度大于6vw，浏览器会优先展示图片的原始宽度，导致.logo容器的实际宽度被撑开，打破了三个元素的宽度平衡，进一步加剧偏移。

针对你的需求（屏幕边框与国家标识间留padding、图片居中），可以这样修改：

1. 给底部的columns容器添加padding，实现边框与国家标识的间距 #

直接给最底部的columns容器（或者单独给它加专属类）添加左右padding，替代.country里的水平padding，确保国家标识和屏幕边框的间距一致：

/* 给底部columns加专属类，避免影响其他行 */
.columns-bottom {
  display: flex;
  justify-content: center; /* 让整体内容居中 */
  gap: 2vw; /* 国家标识与logo之间的间距 */
  padding: 0 2vw; /* 屏幕边框与国家标识的padding */
}

2. 让左右国家标识宽度一致，确保logo居中 #

给.country设置flex: 1，让它们平分容器内除logo之外的空间，同时保持文字居中：

.country {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: calc(4vw + 4vh + 2.5vmin);
  flex-direction: column;
  /* 去掉原来的水平padding，改用容器的padding */
  padding: 0.8vw 0;
  flex: 1; /* 关键：平分剩余空间，确保左右宽度一致 */
}

3. 控制图片尺寸，避免撑开logo容器 #

给<img>添加尺寸限制，让它适应.logo容器的宽度：

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 6vw; /* 可根据需求调整 */
}

.logo img {
  max-width: 100%;
  height: auto; /* 保持图片比例 */
}

4. 调整对应的HTML结构 #

给底部的columns加上专属类，方便单独设置样式：

<div class="columns columns-bottom">
  <div class="country">RUS</div>
  <div class="logo">
    <img src="res/icon.png" alt="Match Logo">
  </div>
  <div class="country">ISR</div>
</div>

这样修改后，左右国家标识会平分容器空间，logo稳稳居中，同时屏幕边框和国家标识之间也有了均匀的padding，完美符合你的需求。

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