Question

我已经尝试了很多方法来将儿童元素作为绝对垂直中心的中心，但不能用任何技术取得成功。

html（无法更改）：

<div class="foo">
    <h1>blah blah</h1>
    <p>foo</p>
    <p>bar</p>
</div>

的CSS：

.foo{
    position: absolute;
    top: 0;
    bottom: 0;
    background: yellow;
}
.foo:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

请注意：我无法更改标记，即我无法用父div包裹.foo，甚至无法用{div}将.foo内的所有子项包裹起来。

那么，我怎样才能将它们垂直居中于整个窗口？

Answer 1

您可以使用css flexbox布局来实现此目的：

JSFiddle - DEMO

.foo {
    position: absolute;
    top: 0;
    bottom: 0;
    background: yellow;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    /* align-items: center; */
}
h1, p {
    margin:0;
}

<div class="foo">
    <h1>blah blah</h1>
    <p>foo</p>
    <p>bar</p>
</div>

Answer 2

这是一个可能的解决方案：

将.foo元素设为一个表格，将每个孩子设为table-row。

然后添加after和before个伪元素，也作为行，强制它们与min-height: 100%;一起展开。

然后内部元素会挤在中间：

Updated Fiddle

＆＃13;

.foo{
    position: absolute;
    top: 0;
    height: 100%;
    background: yellow;
    display: table;
}

.foo:before, .foo:after {
    content: "";
    display: table-row;
    min-height: 100%;
}

.foo > * {
    display: table-row;
    vertical-align: middle;
    height: 0;
}

＆＃13;

<div class="foo">
    <h1>blah blah</h1>
    <p>foo</p>
    <p>bar</p>
</div>

＆＃13;

绝对垂直定心元素

2 个答案: