CSS布局：如何实现match-display内容相对main主容器居中对齐

仅用Flexbox就可以完全实现你要的布局效果，不需要Grid或其他布局方案。

问题原因 #

现在对阵内容对齐不对，核心是flex占宽设置错误：

• 你给.info和.match-display都加了flex: 1，两个区块会把.container的宽度平分成两半
• .match的居中是相对于自己的父元素（也就是占了一半宽度的.match-display）生效的，最终居中位置在整个容器3/4宽度处，自然对不上和整个.main同宽居中的标题
• 额外给.match-display写的flex: 1 100%还会触发flex换行，进一步打乱布局逻辑。

修复方案 #

提供两种纯Flexbox的改法，可根据实际需求选择：

方案1：纯Flex无定位（适合左侧信息栏宽度固定的场景） #

不需要修改HTML结构，仅调整CSS即可：

1. 把.container的justify-content从center改成space-between，实现子元素两端对齐
2. 给.container加一个::after伪元素作为右侧占位，宽度和左侧.info完全一致
3. 删掉.info上的flex:1、.match-display上的flex:1 100%这两个错误的占宽属性

修改后的核心CSS代码：

.main{
  background-color:red;
  text-align: center;
}

.container{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 右侧占位块，宽度和左侧info保持一致 */
.container::after{
  content: "";
  width: 25%;
}

.title{
  display: block;
}

.league{
  display: flex;
  align-items: center;
}

.stadium-date{
   display:flex;
   flex-direction: column;
   align-items: center;
}

.info{
  width: 25%;
  text-align: center;
}

.info img{
  width: 50%;
}

.match-display{
  /* 移除原有flex:1 100%属性 */
}

.match{
  display: flex;
  justify-content: center;    
  align-items: center;
}

.match img{
  width: 5%;
}

.main-match{
  border-style: solid;
  border-width: 3px;
  border-image: linear-gradient(to left, red 0%, red 25%, black 50%, red 75%, red 100%) 100% 0 100% 0/3px 0 3px 0 stretch;
}

实现原理：flex两端对齐模式下，三个子元素（左.info、中.match-display、右占位伪元素）会分别靠最左、中间、最右排列，左右两个块宽度相同的情况下，中间的对阵区块自然落在整个容器的水平正中心，和顶部标题完全对齐。

方案2：Flex+轻量定位（适合左侧信息栏宽度随内容自适应的场景） #

如果左侧.info不需要固定宽度，这个方案灵活性更高：

1. 给.container加position: relative作为定位参照，同时设置最小高度，避免绝对定位的内容导致容器高度塌陷
2. 删掉.info的flex:1，让它自然靠左排布
3. 删掉.match-display的flex占宽属性，用绝对定位实现相对于容器的水平居中

核心修改的CSS片段：

.container{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  min-height: 200px; /* 按实际内容高度调整即可 */
}

.info{
  /* 移除flex:1属性 */
  text-align: center;
}

.match-display{
  /* 移除flex:1 100%属性 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

这个写法不需要固定任何区块宽度，对阵内容会始终相对于整个外层容器居中，和标题的对齐位置完全一致，不会受左侧info宽度变化的影响。

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