我有一個彈性盒（請參閱下面的程式碼片段作為範例）。
我想設定它，以便在所有情況下， 位於flex-box 的中心，其他跨度將圍繞它流動，基於他們的標記。
我基本上是在尋找 align-self CSS 代碼，但針對主軸，而不是橫軸（這可能有助於解釋我的要求）。
我還將margin: auto; 應用於我的，這是我在閱讀本文後了解到的（一個很棒的頁面，但它仍然讓我留下了我的以下問題- 除非我沒有完全理解所有內容）。
這是我拿到的程式碼：
.container { align-items: center; border: 1px solid red; display: flex; justify-content: center; width: 100%; } h2 { margin: auto; ] I'm an h2
I'm span 1 I'm span 2 I'm span 3 I'm span 1 I'm span 2 I'm span 3 I'm an h2
I'm span 4 I'm span 5 I'm span 6 I'm span 1 I'm span 2 I'm an h2
I'm span 3 要完全重申我的問題：我想知道如何將
在我的頁面上居中，以便無論其他在我的頁面上居中，以便無論其他在哪裡，將始終位於彈性框的死點中心。
P.S.：我願意使用 JavaScript 和 jQuery，但我更喜歡使用純 CSS 方式來實現這一點。
麥可‧班傑明回答後：
他的回答讓我思考。雖然我還沒有找到一種方法來做到這一點，但我相信以下是朝著正確方向邁出的一步：
HTML
I'm span 1 I'm span 2 I'm span 3I'm an h2
I'm span 4 I'm span 5 I'm span 6
CSS
.container div { flex: 1 1 auto; text-align: center; } h2 { flex: 0 0 auto; margin: auto; }
.container { align-items: center; border: 1px solid red; display: flex; justify-content: center; width: 100%; } .container div { flex: 1 1 auto; text-align: center; } h2 { flex: 0 0 auto; margin: auto; } I'm an h2
I'm span 1 I'm span 2 I'm span 3 I'm span 1 I'm span 2 I'm span 3 I'm an h2
I'm span 4 I'm span 5 I'm span 6 I'm span 1 I'm span 2 I'm an h2
I'm span 3 基本上，理論是，雖然 正如您在上面的程式碼片段中看到的，我嘗試過（ 的總數未知，但已知總共有三個元素： < div>
flex: 0 0 auto和flex: 1 1 auto等）讓它工作但還沒有成功。誰能告訴我這是否是朝著正確方向邁出的一步，以及如何將其推向實際產品？
一種方法是在兩側新增空跨度，然後將跨度和 h2 設定為某個彈性值，如下所示：
.container { align-items: center; border: 1px solid red; display: flex; justify-content: center; width: 100%; } h2 { margin: auto; text-align: center; flex: 3 0; } span{ flex: 1 0; }所以你保證兩邊的空間相等。那麼唯一的問題是您必須確定您希望 h2 採用多少寬度。
Flex 對齊屬性透過指派容器中的可用空間來發揮作用。
因此，當一個 Flex 項目與其他項目共享空間時，沒有單步驟方法可以將其居中，除非兩側同級項目的總長度相等。
在第二個範例中，
h2兩邊的跨度總長度相等。因此，h2完全位於容器的中心。.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; }