如何將第一個flexbox垂直居中，其餘列表如下

給定此標記，列表中的第一個項目應該垂直居中在屏幕上，其餘的應該跟在後面。但是，它並不是垂直居中。此外，它不應該要求基於項目高度的硬編碼值（該項目應該能夠具有動態高度）。如何將第一個flexbox垂直居中，其餘列表如下

* { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
div { 
 
    display: flex; 
 
} 
 

 
body > div { 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    border: 1px solid orange; 
 
    flex-direction: column; 
 
} 
 

 
body > div > div { 
 
    max-width: 600px; 
 
    border: 1px solid black; 
 
    width: 100%; 
 
} 
 

 
body > div > div > div { 
 
    border: 1px solid blue; 
 
    background: red; 
 
    height: 30px; 
 
    flex: 1; 
 
    width: 100%; 
 
} 
 

 
body > div { 
 
    top: 50%; 
 
} 
 

 
body > div > div { 
 
    -webkit-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
}

<div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
</div>

來源

2017-10-16 Lance Pollard

當你說動態的高度，是不是每件這樣即第一個可以是50像素，第二100px的等等？ – LGSon

順便提一下，'body'的默認'margin'會在你的代碼示例中將它設置爲一些，'body {margin：0; }'解決這個問題。 – LGSon

假設項目將動態調整大小，並獨自解決這個使用CSS ，需要一個小的標記更改。

的第一個項目將有它自己的包裝，然後，用一個僞相匹配的第二包裝，我們可以給僞和第二包裹flex: 1平等地分享body的高度，減去第一包裝內容，這樣，無論每件商品的尺寸如何，第一件商品都會居中。

body > div > div規則中的flex-shrink: 0;規則可防止物品在合適的物品太多時適合滑動。

棧片斷

* { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
body {           /* added rule */ 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin: 0; 
 
} 
 

 
body::before, body > div:nth-child(2) {  /* added rule */ 
 
    content: ''; 
 
    flex: 1; 
 
} 
 

 
div { 
 
    display: flex; 
 
} 
 

 
body > div { 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
body > div > div { 
 
    max-width: 600px; 
 
    border: 1px solid black; 
 
    width: 100%; 
 
    flex-shrink: 0;        /* added */ 
 
} 
 

 
body > div > div > div { 
 
    border: 1px solid blue; 
 
    background: red; 
 
    min-height: 30px; 
 
    flex: 1; 
 
} 
 

 
/* middle marker for this demo only */ 
 
span {position: absolute; width: 30px; height: 50%; right: 0; background: lime; z-index: 100}

<div> 
 
    <div> 
 
    <div>Hey<br>Hey<br>Hey<br></div> 
 
    </div> 
 
</div> 
 
<div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div>Hey<br>Hey<br>Hey<br></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
</div> 
 

 
<span>50% high</span>

來源

2017-10-16 08:04:37 LGSon

給這個CSS爲中心

body > div:first-child { 
margin-top:20px; 
} 

body > div > div{ 
-webkit-transform: translateY(-50%); 
transform: translateY(-50%); 
}

* { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
div { 
 
    display: flex; 
 
} 
 

 
body > div { 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    border: 1px solid orange; 
 
    flex-direction: column; 
 
} 
 

 
body > div > div { 
 
    max-width: 600px; 
 
    border: 1px solid black; 
 
    width: 100%; 
 
    -webkit-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
} 
 

 
body > div > div > div { 
 
    border: 1px solid blue; 
 
    background: red; 
 
    height: 30px; 
 
    flex: 1; 
 
    width: 100%; 
 
} 
 

 
body > div:first-child { 
 
margin-top:20px; 
 
}

<div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
    <div> 
 
    <div></div> 
 
    </div> 
 
</div>

來源

2017-10-16 04:27:43

根據您的反饋進行更新。還不完全，請參閱更新的示例。第一項是集中的，但其他一切都沒有順利地流動（之間存在差距）。 –

這已經足夠接近答案，謝謝。 –

根據您的反饋更新了問題並附答案。謝謝。 –

如何將第一個flexbox垂直居中，其餘列表如下

回答

相關問題