如何用Flex在三列布局中水平居中中间元素（无固定宽度）

完全可行，利用Flex的**自动外边距（auto margin）**特性就能实现，不需要给左右外侧元素设置固定宽度，具体实现如下：

修正后的完整代码 #

CSS代码

section {
  display: flex;
  width: 100%; /* 修正原代码里的语法错误：width. → width: */
  align-items: center;
}

/* 左侧元素自动占据右侧剩余空间，靠向左边 */
aside:first-child {
  margin-right: auto;
}

/* 右侧元素自动占据左侧剩余空间，靠向右边 */
aside:last-child {
  margin-left: auto;
}

/* 页面中线辅助，验证中间元素是否居中 */
div {
  position: fixed;
  top: 0;
  left: calc(50% - 1px);
  height: 100%;
  width: 2px;
  background: red;
}

HTML代码

<section>
  <aside>short</aside>
  <h2>Center</h2>
  <aside>longer element</aside>
</section>

<div></div>

核心原理 #

Flex布局里，margin: auto会自动填充元素所在轴的剩余空间：

• 给左侧aside加margin-right: auto，它会把自己和中间元素之间的所有剩余空间“吃掉”，直接靠到容器左侧；
• 给右侧aside加margin-left: auto，同理会靠到容器右侧；
• 中间的h2元素没有额外的margin设置，自然就处于Flex容器的水平中心，也就是相对于整个页面居中。

另一种等效写法 #

也可以先给容器设置justify-content: center，再配合auto margin，效果完全一样：

section {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

aside:first-child {
  margin-right: auto;
}

aside:last-child {
  margin-left: auto;
}

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