在 div 内垂直对齐 div

Question

这几天我一直在拔头发（剩下的）。我已经看到并尝试在 SO 和其他谷歌搜索上实施各种解决方案，遗憾的是无济于事。

我试图在另一个使用 flex 定位的 div 中垂直居中一个 div。这个 div 的子元素也应该居中。

我正在尝试尽可能保持宽度和高度的响应性，此页面将用作各种高分辨率显示器上的仪表板。

类似问题 - 我知道这里有一个与我自己非常相似的问题： Vertical align fluid div within 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 方面的专家，但我认为我能够通过它获得您想要的东西。关键是将height: 100%（还有一些其他更改）添加到.widget-content-container，尽管我不知道为什么正确放置的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>