從我對這個問題的研究中，我了解到 CSS 網格似乎能夠處理相當復雜的行為。我的場景更簡單，我希望有 4 個均勻間隔的面板框，代碼如下。我的問題是為什么水平間隙不在垂直中間居中？我通過 trail&error 來測試對齊、對齊和網格規范的各種組合，但找不到解決方案。我需要在我的代碼中添加什么才能使間隙在頁面上垂直居中？.main-container {    display: grid;    grid-template-columns: repeat(2, 1fr);    grid-gap: 20px;    height: 100vh;    align-items: stretch;    margin: 0;    padding: 0;    justify-content: space-between;}.container {    border: 3px solid black;    display: flex;    position: relative;    flex-direction: column;    margin: 0;    padding: 0;}.shared {    justify-content: center;    border: none;}.sub-container {    border: 3px solid black;    align-items: stretch;    height: 100%;    margin: 0;    padding: 0;} <div class="main-container">    <div class="container" id="A">        <h1>Section A</h1>        <p id="A-values">A Values</p>    </div>    <div class="container" id="B">        <h1>Section B</h1>        <p id="B-values">B Values</p>    </div>    <div class="container" id="C">        <h1>Section C</h1>        <p id="C-values">C Values</p>    </div>    <div class="container shared" id="D">        <div class="sub-container">            <h2>SubSection D1</h2>            <p id="D1-values">D1 Values</p>        </div>        <div class="sub-container">            <h2>SubSection D2</h2>            <p id="D2-values">D2 Values</p>        </div>        <div class="sub-container">            <h2>SubSection D3</h2>            <p id="D3-values">D3 Values</p>        </div>    </div></div>