Абсолютные вертикальные центрирующие элементы

Question

Я пробовал много методов, чтобы центрировать элементы элементов абсолютного вертикального центра, но не мог быть успешным с помощью каких-либо приемов.

Here's one example what I've tried:

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%; 
} 

Пожалуйста, обратите внимание: я не могу изменить разметку т.е. я не могу обернуть .foo с родительского DIV и даже не может обернуть всех детей в пределах .foo с div.

Итак, как я могу вертикально центрировать их по всему окну?

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

.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; 
 
}

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