CSS가 절대 위치 지정 div 집합의 경계 상자 중심 지정

Question

CSS로 수행 할 수 있는지는 모르겠지만 자바 스크립트 방식으로 진행하기 전에 중심으로 배치 할 수 있는지 알고 싶습니다 (전체적으로) 절대 positionned 된 div의 집합 : 나는 경계 상자 페이지에서 해당 항목의을 중심 싶습니다

<div id="container"> 
    <div id="item1" style="position:absolute;left:100px;top=50px>...some content...</div> 
    <div id="item2" style="position:absolute;left:0px;top=0px>...some content...</div> 
    <div id="item3" style="position:absolute;left:150px;top=100px>...some content...</div> 
    <div id="item4" style="position:absolute;left:75px;top=75px>...some content...</div> 
</div> 

.

"position : absolute"로 스타일이 지정되었으므로 플로우가 흐트러 지므로 컨테이너 div의 크기는 0px이므로 일반적인 트릭은 작동하지 않습니다.

마지막으로, 항목이 될 것이다 실제로 단지 설명되는 위의 조각은 임의로 (동적 그들 중 일부) 및 크기를 positionned 및 콘텐츠는이 (그리고 될 수 알려져 있지 않다 동적 너무). 이러한 모든 역 동성 때문에 CSS를 사용하여 모든 것을 처리하는 것이 더 좋을 것입니다.

Answer 1

이봐 지금 당신은 당신의 HTML과 CSS를 변경할 수있는 것보다 유 쉽게 등이

HTML과 같은

<div id="container"> 
    <div id="item1">...some content...</div> 
    <div id="item2">...some content...</div> 
    <div id="item3">...some content...</div> 
    <div id="item4">...some content...</div> 
</div> 

CSS는

#container{ 
background:red; 

    overflow:hidden; 
} 
#item1, #item2, #item3, #item4{ 
background:pink; 
    margin:10px; 
    margin-left:100px; 
} 

Live demo

Answer 2

#container에 고정 너비를 지정하고 위치를 지정하는 방법 : relative; 확인하십시오 http://jsfiddle.net/65vk2/