CSS 위치 고정 중앙 형제

Question

사이드 바은 고정 위치로 설정되어 있으며 내용의 중심은입니다. 문제는 콘텐츠를 사이드 바 인 과 관련하여 집중시키는 것입니다. 그러나 위치가 고정되어 있으므로 내용은 본문의 전체 너비에 대해서만 가운데에 맞 춥니 다.

나는이 제대로 내용 중심 것이다 몸 마진을 설정하여 해결할 수 있습니다 알고 있지만, 나는 단지 페이지와 모든 일부에 사이드 있습니다. 전반적인 문제를 설명하기 위해 fiddle을 만들었습니다. 사이드 바가 표시 될 시간의 절반, 시간이없는 절반입니다. 그러나 콘텐츠의 위치는 항상 동일하며 이는 내가 원하는 바가 아닙니다. 남아있는 여유 공간 (사이드 바 (있는 경우))을 중심으로 중심에두기를 원합니다.

요약하면 HTML 구조 (#everything 및 #content)를 정적으로 유지하려고하지만 사이드 바는이 작업을 수행하는 데 필요한 모든 변경을 할 수 있습니다.

저는 고정되어 있지 않은 사이드 바를 가질 생각 이었지만 높이가 길고 무한한 길이였습니다. 그리고 그 위에는 내용이있는 위치 고정 요소가 추가되었습니다. 이렇게하면 사이드 바는 콘텐츠를 방해하지 않고 적절하게 중심에두고 콘텐츠를 고정시킵니다.

#sidebar { 
    position: fixed; 
    width: 200px; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    border-right: 1px solid #111; 
    padding:5px; 
    background:#f3f3f3; 
} 

#content { 
    width:250px; 
    margin:0 auto; 
} 

Answer 1

에 따라 약간 복잡하지만 다음

#everything{ 
    display:flex; 
} 
#sidebar { 
    width: 200px; 
    height:100%; 
    border:1px solid #ccc; 
} 
#sidebar div{ 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    border-right: 1px solid #111; 
    padding:5px; 
    background:#f3f3f3; 
    width: 200px; 
} 
#content { 
    flex:1; 
} 
#content div{ 
    width:250px; 
    margin:0 auto; 

} 

을 시도 할 수 있습니다 :하지만

CSS는 ... 거기에 그 사이드 바 숙박을 무한히 오래하는 방법을 잘 모릅니다 다음 바이올린에서 찾을 수있는 html 부분 JsFiddle

Answer 2

정렬 자동 센터 및 위치 고정 용

에 대한 간단한 예입니다.

HTML :

<div class="popup"> 
    <div class="wrapper"> 
     some content 
    </div> 
</div> 

CSS :

.popup{ 
    position:fixed; 
    left:50%; 
} 
.popup .wrapper{ 
    position:relative; 
    left:-50%; 
} 

예는 :

JsFiddle 는 행복 :