짧은 대답 : 아닙니다. (이제 CSS 변환으로 가능합니다. 아래 편집 참조)

긴 대답 : “고정 된”위치 지정 사용시 문제는 요소 가 흐름에서 빠져 나간다는 것입니다 . 따라서 부모가없는 것처럼 재배치 할 수 없습니다. 그러나 컨테이너의 너비가 고정 된 알려진 경우 다음과 같은 것을 사용할 수 있습니다.

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

편집 (03/2015) :

오래된 정보입니다. CSS3 변환의 마법을 사용하여 동적 크기 (가로 및 세로)의 내용을 가운데에 배치 할 수 있습니다. 동일한 원칙이 적용되지만 마진을 사용하여 컨테이너를 오프셋하는 대신을 사용할 수 있습니다 translateX(-50%). 너비가 고정되어 있지 않은 한 오프셋을 얼마나 많이 알지 못하고 상대적 요소 (예 50%:)를 부모 요소와 관련이 있기 때문에 상대 값을 사용할 수 없기 때문에 위의 마진 트릭으로는 작동하지 않습니다. 에 적용됩니다. transform다르게 행동합니다. 그 값은 적용되는 요소와 관련이 있습니다. 따라서 는 요소의 너비의 절반 50%을 transform의미 50%하고 여백은 부모 너비의 절반을 의미합니다. 이것은 IE9 + 솔루션입니다

위 예제와 유사한 코드를 사용하여 완전히 동적 너비와 높이를 사용하여 동일한 시나리오를 다시 만들었습니다.

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

중앙에 배치하려면 다음을 수행하십시오.

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

시민:

jsFiddle : 가로로만
중앙
정렬 jsFiddle : 가로와 세로로 중앙 맞춤 이 답변 에서 나에게 지적 해 준
사용자 신용은 사용자 aaronk6 에게 전달됩니다.

답변

/* Main site body */
.wrapper {
    width: 940px;
    margin: 0 auto;
    position: relative; /* Ensure absolute positioned child elements are relative to this*/
}

/* Absolute positioned wrapper for the element you want to fix position */
.fixed-wrapper {
    width: 220px;
    position: absolute;
    top: 0;
    left: -240px; /* Move this out to the left of the site body, leaving a 20px gutter */
}

/* The element you want to fix the position of */
.fixed {
    width: 220px;
    position: fixed;
    /* Do not set top / left! */
}

<div class="wrapper">
    <div class="fixed-wrapper">
        <div class="fixed">
            Content in here will be fixed position, but 240px to the left of the site body.
        </div>
    </div>
</div>

-webkit-transform: translateZ(0);

body { background: #ccc; }

.wrapper {
    margin: 0 auto;
    height: 1400px;
    width: 650px;
    background: green;
}

.sidebar {
    background-color: #ddd;
    float: left;
    width: 300px;
    height: 100px;
    position: fixed;
}

.main {
    float: right;
    background-color: yellow;
    width: 300px;
    height: 1400px;
}

<div class="wrapper">wrapper
    <div class="sidebar">sidebar</div>
    <div class="main">main</div>
</div>

<div id='body' style='height:200%; position: absolute; width: 100%; '>
    <div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
        <div id='content' style='position: fixed;'>content</div>
    </div>
</div>