css - 在视口(viewport)的 100% 的 div 中垂直居中具有可变高度的 div

我知道这个问题看起来已经被问过很多次了，但我就是找不到针对那个非常具体情况的解决方案。

这是我布局的基本线框:

enter image description here

基本上，我有几个具有不同背景的 div，它们占据浏览器窗口的 100% 宽度和 100% 高度。在它们中的每一个中都有另一个 div，其宽度占其父级的 50%，但高度可变，具体取决于其内容。

我希望所有这些 div-within-a-div 垂直对齐。现在，我读到在父级上放置一个 display:table-cell 和一个 vertical-align:middle 应该可行，但在这种情况下，它似乎把事情搞砸了。 :-/

我的代码:

<head>
<style>
     html, body {
            height: 100%;
        }
        body > div {
            width: 100%;
            height: 100%;
            background-size: cover;
        }

        .centered {
            width: 50%;
            margin: 0 auto;
            background: rgba(0,0,0,0.4);
            padding: 50px 0 30px 0;
        }
</style>
</head>
        <body>

            <div id="pic_1">
                    <div class="centered">content</div>
            </div>

            <div id="pic_2">
                    <div class="centered">content</div>
            </div>

            <div id="pic_3">
                    <div class="centered">content</div> 
            </div>  

        </body>

感谢您的帮助!

最佳答案

设置祖父元素为display:table; height:100% 父元素为display:table-cell;垂直对齐:中间。

参见“方法 1”here举个例子。

_{另外，请注意您的标记 should not use class="centered" ;请改用语义类名称。}

关于css - 在视口(viewport)的 100% 的 div 中垂直居中具有可变高度的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14113676/