CSS 위치 지정 및 겹침

Question

HTML 페이지의 CSS 생성 섹션이 있습니다. 현재 탐색 모음의 오른쪽에있는 페이지의 주요 컨텐츠 영역에 위치합니다. 탐색 막대 아래에있는 것을 포함하여 전체 HTML 페이지의 중앙에 배치해야하는 그래프가 있습니다.

HTML 코드 블록 (일부 CSS도 있음)을 오버레이하여 전체 페이지 중앙에 배치하려면 어떻게해야합니까?

나는 이것을하는 방법에 관해서 직감을 가지고있다 : 나는 탐색 모음 아래에 가기 위해 CSS 섹션을 중첩해야한다고 생각한다.

.layout #mainContent h6 { 
position:absolute; 
left:-1000px; 
top:-10px; 
z-index:5 
} 

오버레이 될 HTML이 h6 이하가됩니다. ,

html로 내가 더 많거나 적은 내 HTML의 섹션의 모든 코드를 중심으로하는 방법을 원하는이

<h6> 
    All the HTML code to be overlaid 
</h6> 

처럼 기록 될 것이다, 그러나 전체 HTML 페이지로 상대를 중심으로해야합니다 CSS boxed 섹션 뿐만이 아닙니다.

Answer 1

오버레이 콘텐츠에 고정 너비와 높이를 설정하면됩니다. 예 :

.layout #mainContent h6 { 
    width:200px; 
    height:20px; 
    position:absolute; 
    top: 50%; 
    left: 50%; 
    margin-top:-10px; /* half element's height */ 
    margin-left:-100px; /* half element's width */ 
    z-index:1000 
} 

데모 : 자주 CSS를 사용하고 이것은 우리가 그것을 할 거라고 어떻게 http://jsfiddle.net/P95Bz/1/

Answer 2

우리는 일을 중심 :

.layout #mainContent h6 { 
position:absolute; 
left:50%; 
margin-left:-1000px; /* half the element's width */ 
top:50%; 
margin-top:-10px; /* half the element's height */ 
z-index:5 
} 

을하지만 물론 모든 브라우저 &의 높이를 중앙에 화면 해상도가 본문 태그에 다음 조건을 추가해야합니다. 그렇지 않으면 브라우저는 본문 내용 (예 : 20px)만큼 높을 것으로 가정합니다.

body { 
    margin-top:0px; 
    margin-left:0px; 
    margin-bottom:0px; 
    margin-right:0px; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    height:100% !important; 
    width:100%; 
}