html - 在 div 内垂直对齐 div

Question

为了这个，我已经把(剩下的)头发拔了几天了。我已经看到并尝试在 SO 和其他谷歌搜索上实现各种解决方案，遗憾的是无济于事。

我正在尝试将一个 div 在另一个使用 flex 定位的 div 中垂直居中。这个 div 的 child 也应该居中。

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

Similar Question - I'm aware there is a very similar question to my own here: Vertical align fluid div within another fluid div. I've tried to implement in my solution but it doesn't appear to make a difference. 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% (还有一些其他更改)，尽管我不确定为什么要放置合适的 对齐元素:拉伸(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>