Flex 对齐属性分配容器内未占用的空间。因此，除非相邻项目的组合宽度等于容器的宽度，否则不可能自动将被其他项目包围的弹性项目居中。
考虑提供的第二个示例。 h2 元素两侧的 span 元素的总宽度相等。因此，h2 完全位于容器的中心。
<code class="css">.container {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
p {
text-align: center;
}
p > span {
background-color: aqua;
padding: 5px;
}</code><code class="html"><div class="container"> <span>I'm span 1</span> <span>I'm span 2</span> <span>I'm span 3</span> <h2>I'm an h2</h2> <span>I'm span 4</span> <span>I'm span 5</span> <span>I'm span 6</span> </div> <p><span>TRUE CENTER</span></p></code>
以上是如何将容器中的 Flex 项目与其他 Flex 项目一起居中？的详细内容。更多信息请关注PHP中文网其他相关文章！
