當被其他Flex 項目包圍時，使Flex 項目在容器中居中
當被其他Flex 項目包圍時，使Flex 項目在容器內居中，請考慮以下內容：
常規方法
替代方法
範例程式碼
在以下範例中，使用 h2 正確居中另一種方法，確保兩側跨度項目的總長度相等。
HTML:
<code class="html"><div class="container">
<div>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
<h2>I'm an h2</h2>
<div>
<span>I'm span 4</span>
<span>I'm span 5</span>
<span>I'm span 6</span>
</div>
</div></code>CSS:
<code class="css">.container {
align-items: center;
display: flex;
justify-content: center;
border: 1px solid red;
}
.container div {
flex: 1 1 auto;
text-align: center;
}
h2 {
flex: 0 0 auto;
margin: auto;
}</code>以上是當 Flex 專案被其他 Flex 專案包圍時，如何讓容器內的 Flex 專案居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
