절대 수직 중심 맞춤 요소

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

주의 사항 : 나는 마크 업 예를 변경할 수 없습니다 심지어 부모 DIV와 함께 .foo을 쌀 수 없습니다 div와 함께 .foo 내의 모든 아동을 감쌀 수 없습니다.

그래서 어떻게 전체 창 위에 세로로 가운데 놓을 수 있습니까?

가 .foo 요소 테이블 확인하고 모든 아이 table-row :

Answer 1

는 당신이 얻을 수있는이 같은 CSS를 flexbox 레이아웃을 사용하여 :

JSFiddle -(210)

.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

여기에 가능한 솔루션입니다.

그런 다음 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>