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

Question

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

Tom*_* S. 6 css height vertical-alignment

我知道它看起来像是一个被问过多次的问题,但我找不到解决这个非常具体的情况.

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

在此输入图像描述

基本上,我有一些不同背景的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>

Run Code Online (Sandbox Code Playgroud)

谢谢你的帮助!

Answer 1

Phr*_*ogz 2

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

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

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

归档时间：	12 年，11 月前
查看次数：	4063 次
最近记录：	12 年，5 月前