在 div 內垂直對齊 div

Question

這幾天我一直在拔（剩下的）我的頭發。 我已經看到並嘗試在 SO 和其他谷歌搜索上實施各種解決方案，遺憾的是無濟於事。

我試圖在另一個使用 flex 定位的 div 中垂直居中一個 div。 這個 div 的孩子也應該居中。

我試圖保持寬度和高度盡可能響應，此頁面將用作各種高分辨率顯示器上的儀表板。

類似問題- 我知道這里有一個與我自己的問題非常相似的問題： Vertical align fluid div inside another fluid div 。 我試圖在我的解決方案中實現，但它似乎沒有什么不同。 https://jsfiddle.net/AndyMeFul/Luc53a6t/

HTML：

<div id="widget-container">
<div id="widget-one" class="widget widget-prio">
    <div class="widget-header">Big Widget</div>
    <div class="widget-content-container">
        <div class="widget-textblock widget-textblock-prio">Vertically Center Me..</div>
        <div class="widget-textblock">Also me..</div>
    </div>
</div>
<div id="widget-two" class="widget">
    <div class="widget-header">Small Widget</div>
    <div class="widget-content-container">
        <div class="widget-textblock">And I.</div>
    </div>
</div>
<div id="widget-three" class="widget">
    <div class="widget-header">Empty Widget</div>
</div>

CSS：

body {
    font-family: sans-serif;
    background-color: lightseagreen;
    margin 0;
}
#widget-container {
    display: flex;
    position: fixed;
    top: 30px;
    right: 0;
    bottom: 0;
    left: 0;
}
.widget {
    margin: 15px;
    background-color: white;
    flex-grow: 1;
    border: solid 1px black;
}
.widget-prio {
    flex-grow: 3;
}
.widget-header {
    padding: 10px 0;
    width: 100%;
    text-align: center;
    background-color: skyblue;
}
.widget-content-container {
    display: flex;
    background-color: lightgrey;
    padding: 5px;
}
.widget-textblock {
    flex-grow: 1;
    text-align: center;
}
.widget-textblock-prio {
    flex-grow: 3;
}

JSFiddle： https ://jsfiddle.net/AndyMeFul/bLmy3ngq

Answer 1

誠然，我不是 flex 方面的專家，但我認為我能夠通過它獲得您想要的東西。 關鍵是向.widget-content-container添加height: 100% （還有一些其他更改），盡管我不確定為什么放置良好的align-items: stretch不起作用。

 body { font-family: sans-serif; background-color: lightseagreen; margin 0; } #widget-container { display: flex; position: fixed; top: 30px; right: 0; bottom: 15px; left: 0; } .widget { display: flex; flex-direction: column; margin: 15px 15px 0; background-color: white; border: solid 1px black; } .widget-prio { flex-grow: 3; } .widget-header { padding: 10px 0; width: 100%; text-align: center; background-color: skyblue; } .widget-content-container { display: flex; background-color: lightgrey; padding: 5px; height: 100%; } .widget-textblock { flex-grow: 1; text-align: center; align-self: center; } .widget-textblock-prio { flex-grow: 3; }

 <div id="widget-container"> <div id="widget-one" class="widget widget-prio"> <div class="widget-header">Big Widget</div> <div class="widget-content-container"> <div class="widget-textblock widget-textblock-prio">Horizontally Center Me..</div> <div class="widget-textblock">Also me..</div> </div> </div> <div id="widget-two" class="widget"> <div class="widget-header">Small Widget</div> <div class="widget-content-container"> <div class="widget-textblock">And I.</div> </div> </div> <div id="widget-three" class="widget"> <div class="widget-header">Empty Widget</div> </div> </div>