我知道 Flexbox 为居中项目提供了一个很好的解决方案。但是当我有 3 个项目并且我希望中心（第二个）项目相对于窗口居中时，我遇到了一个问题，而不管其他 2 个项目的大小。
在我的笔中，您可以看到第二项“客户索引”偏离中心，因为右侧的内容比左侧的内容大。我怎样才能强迫它居中？
.flex {
display: flex;
align-items: center;
justify-content: space-between;
}
<div class="flex">
<span style="font-size:12px;">small</span>
<span style="font-size:20px;">Client Index</span>
<span style="font-size:18px;">Lots of content that moves the center</span>
</div>
我的代码笔 https://codepen.io/anon/pen/Pjqjvd
一种方法是设置flex-grow: 1; flex-basis: 0这样 3 列均匀分布，然后您可以将文本或内容居中于中间一列。
我在用着text-align使中间列居中。你也可以使用display: flex; justify-content: center;做同样的事情。
.flex {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex > span {
flex: 1 0 0;
}
.flex > span:nth-child(2) {
text-align: center;
}
<div class="flex">
<span style="font-size:12px;">small</span>
<span style="font-size:20px;">Client Index</span>
<span style="font-size:18px;">Lots of content that moves the center</span>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
