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

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

转载作者：技术小花猫更新时间：2023-10-29 11:23:48

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

这是我布局的基本线框:

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>