6

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

这是我的布局的基本线框：

在此处输入图像描述

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

我希望所有这些 divs-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>

谢谢你的帮助！

4

1 回答 1

2

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

有关示例，请参见此处的“方法 1” 。

另外，请注意您的标记不应使用class="centered"; 改用语义类名。

于 2013-01-01T20:02:53.120 回答