머리글과 바닥 글 div간에 콘텐츠를 가운데에 배치하는 방법은 무엇입니까?

이전 질문에서 나는 페이지 하단에 바닥 글 div를 유지하는 방법을 배웠습니다. (see other question)머리글과 바닥 글 div간에 콘텐츠를 가운데에 배치하는 방법은 무엇입니까?

이제 머리글과 바닥 글 div 사이에 내용을 세로로 가운데 맞추려고합니다.

그래서 제가 가지고 것은 : 내가 기존 3 명 div의 집에 부모 사업부를 만드는 시도하고 제공하는 수직 정렬을 div에 한

#divHeader 
{ 
    height: 50px; 
} 

#divContent 
{ 
    position:absolute; 
} 

#divFooter 
{ 
    height: 50px; 
    position:absolute; 
    bottom:0; 
    width:100%; 
} 
<div id="divHeader"> 
    Header 
</div> 
<div id="divContent"> 
    Content 
</div> 
<div id="divFooter"> 
    Footer 
</div>

: 중간; 그러나 그것은 나를 아무 곳에도 데려 간다.

출처

2008-10-15 Jeremy

: 오래된 IE에서

html,body {height:100%;} 
body {display:table;} 
div {display:table-row;} 
#content { 
    display:table-cell; 
    vertical-align:middle; 
}

<body> 
<div>header</div> 
<div id="content">content</div> 
<div>footer</div> 
</body>

http://codepen.io/anon/pen/doMwvJ

(를3210 = 7) 당신은 marxidad가 말한 절대 위치 지정으로 트릭을 사용해야합니다.

그리고 최신 브라우저 you can use flexbox instead.

출처

2008-10-16 18:34:24 Kornel

다시 방문하십시오. 그것은 작동하지 않거나 시대에 뒤 떨어진 것입니다. 머리글과 바닥 글에 배경색을 추가하면 광고 된 것처럼 작동하지 않는 것이 분명합니다. – Suamere

@Suamere Works for me : http://codepen.io/anon/pen/doMwvJ – Kornel

배경 추가 : 빨간색; Header div 만보고 "content"는 실제로 가운데에 정렬되지 않고 단순히 큰 머리글 바로 아래에 표시됩니다. 또한 vertical-align : middle을 똑바로 똑바로 삭제하고 아무 것도 실제로 수직으로 정렬되지 않으므로 아무 효과가 없다는 것을 확인하십시오. 그리고 실제 테스트의 경우 헤더의 실제 높이를 창의 20 %와 같이 높이고 "헤더"와 "바닥 글"사이의 수직 중심이 아닌 "내용"이 바로 아래에 있음을 확인하십시오. – Suamere

div의 height을 전체 콘텐츠 영역을 채우기 위해 설정하거나 좌표가 중앙에 있어야합니다. top:50%; left:50%과 같은 것이지만 물론 오른쪽 하단에 div가 표시됩니다.

출처

2008-10-15 22:44:44

margin-top을 추가하는 경우 : -25 %; margin-left : -25 %; 그 요소를 다시 센터해야합니다. –

여백의 %는 요소가 아닌 컨테이너의 크기를 나타냅니다. 절대 크기를 사용해야합니다. – Kornel

내가 기억하는 한, this (자세히 알아보기 here)과 같은 해킹을 사용할 수 있습니다.

출처

2008-10-15 22:50:56 abahgat

-1

아마 시도 : CSS2에서

 
#divHeader 
{ 
    height: 50px; 
} 

#divContent 
{ 
    /*position:absolute;*/ 
    width: 900px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#divFooter 
{ 
    height: 50px; 
    position:absolute; 
    bottom:0; 
    width:100%; 
}

출처

2008-10-16 01:52:55 CoolGravatar

부정적인 투표가 궁금합니다. 적어도 먼저 이유를 공유하고 downvote하십시오. – Hoque

머리글과 바닥 글 div간에 콘텐츠를 가운데에 배치하는 방법은 무엇입니까?

답변

관련 문제