Question

我知道这看起来像是一个被问过很多次的问题，但我找不到解决这种特殊情况的方法。

这是我布局的基本线框：

enter image description here

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

我希望所有这些div-in-a-div都是垂直对齐的。现在，我已经读到了将显示：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>

感谢您的帮助！

Answer 1

将祖父母元素设为display:table; height:100%，将父元素设为display:table-cell; vertical-align:middle。

有关示例，请参阅“方法1”here。

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

将div中具有可变高度的div垂直居中，该div是视口的100％

1 个答案: