CSS：帶頂部和中心對齊的div的flexbox容器

我正在嘗試創建一個頂部和中心對齊的佈局div s。CSS：帶頂部和中心對齊的div的flexbox容器

<div class="flexbox-container"> 
    <div class="top-item"> 
    top 
    </div> 
    <div class="center-item"> 
    center 
    </div> 
</div> 

<style> 
    body { 
    height: 50vh; 
    } 
    .top-item { 
    flex: 1 0 100%; 
    text-align: center; 
    align-self: flex-start; 
    } 
    .center-item { 
    align-self: center; 
    } 
    .flexbox-container { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -webkit-box-align: center; 

    justify-content: center; 
    height: 100%; 
    flex-wrap: wrap; 
    } 
</style>

我的問題，因此問題：如何精確使在中心的中心對齊的div？目前它上面有空間< =>它在所需高度以下對齊

我有這樣的感覺，這將是關於在父容器中正確使用align-content，但我似乎無法弄清楚。

來源

2017-09-21 B M

可以位置的top-item爲absolute，然後添加align-content: center到Flexbox的容器 - 見下面的演示：

body { 
 
    height: 50vh; 
 
    background: blue; 
 
    } 
 
    .top-item { 
 
    flex: 1 0 100%; 
 
    text-align: center; 
 
    align-self: flex-start; 
 
    position: absolute; /* ADDED */ 
 
    } 
 
    .center-item { 
 
    align-self: center; 
 
    } 
 
    .flexbox-container { 
 
    display: flex; 
 
    background: green; 
 
    justify-content: center; 
 
    height: 100%; 
 
    flex-wrap: wrap; 
 
    align-content: center; /* ADDED */ 
 
    position: relative; /* ADDED */ 
 
    }

<div class="flexbox-container"> 
 
    <div class="top-item"> 
 
    top 
 
    </div> 
 
    <div class="center-item"> 
 
    center 
 
    </div> 
 
</div>

來源

2017-09-21 17:05:27 kukkuz

感謝您的解決方案！我很驚訝整個Flexbox標準仍然存在漏洞 - 這是一個絕對基本的定位類型，其底線是：Flexbox無法做到這一點。要麼你必須按照你所顯示的那樣做，要麼就像在重複問題中顯示的一樣，並使用隱藏的元素 - 這是一個非常醜陋的黑客。 –

@BM，實際上，這不是Flexbox中的一個缺陷。您只想讓flexbox做一些它沒有設計的事情。 Flexbox通過容器中的空間分佈對齊項目。如果空間不均勻，對齊會不均勻。就這麼簡單。 –

如果你正在尋找一個乾淨的解決方案，那麼CSS網格很好地工作：https://jsfiddle.net/zeo29uLa/2/ –

CSS：帶頂部和中心對齊的div的flexbox容器

回答

相關問題