在占满整个视窗的div中，如何垂直居中一个高度不固定的div？

Question

在占满整个视窗的div中，如何垂直居中一个高度不固定的div？

cssheightvertical-alignment

6

我知道这看起来像是一个被问了很多次的问题，但我就是找不到解决那个非常特定情况的方法。

这是我的布局基本线框图:

enter image description here

基本上，我有几个带不同背景的div，它们占据浏览器窗口的100%宽度和100%高度。在每个div内部都有另一个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>

感谢您的帮助！

- Tom S.

可能是重复的问题：如何在 div 中垂直居中具有可变高度的内容？ - KatieK

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phrogz · Accepted Answer

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

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

_{此外，请注意您的标记不应使用class="centered"；请改用语义类名。}