고정 된 div의 CSS 수평 중심?

#menu {
    position: fixed;
    width: 800px;
    background: rgb(255, 255, 255); /* The Fallback */
    background: rgba(255, 255, 255, 0.8);
    margin-top: 30px;
}

나는이 질문이 백만 번 나왔다는 것을 알고 있지만 내 사건에 대한 해결책을 찾을 수 없습니다. 화면에 고정되어야하는 div가 있습니다. 페이지가 스크롤 되더라도 항상 화면 중앙에 CENTERED 상태로 있어야합니다!

div는 500px너비를 가져야 30px하고 상단 (여백 상단)에서 떨어져 있어야하며 모든 브라우저 크기에 대해 페이지 중앙에서 가로로 가운데에 있어야하며 나머지 페이지를 스크롤 할 때 움직이지 않아야합니다.

가능합니까?

left: 50%;
margin-left: -400px; /* Half of the width */

여기에 대한 답변은 구식입니다. 이제 여백을 하드 코딩하지 않고도 CSS3 변환 을 쉽게 사용할 수 있습니다 . 너비 나 동적 너비가없는 요소를 포함한 모든 요소에서 작동합니다.

수평 중심 :

left: 50%;
transform: translateX(-50%);

수직 중심 :

top: 50%;
transform: translateY(-50%);

수평 및 수직 모두 :

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

호환성은 문제가되지 않습니다 : http://caniuse.com/#feat=transforms2d

인라인 블록을 사용하는 것이 옵션이라면이 방법을 권장합니다.

.container { 
    /* fixed position a zero-height full width container */
    position: fixed;
    top: 0; /* or whatever position is desired */
    left: 0;
    right: 0;
    height: 0;
    /* center all inline content */
    text-align: center;
}

.container > div {
    /* make the block inline */
    display: inline-block;
    /* reset container's center alignment */
    text-align: left;
} 

나는 여기에 짧은 게시물을 썼습니다 : http://salomvary.github.com/position-fixed-horizontally-centered.html

2016 년 9 월 편집 : 세상이 계속 움직 였기 때문에 여전히 찬성 투표를하는 것이 좋지만 이제는 변환을 사용하는 대답 (그리고 많은 찬성 투표가 있음)을 사용합니다. 나는 더 이상 이런 식으로하지 않을 것입니다.

여백을 계산하거나 하위 컨테이너가 필요하지 않은 다른 방법 :

#menu {
    position: fixed;   /* Take it out of the flow of the document */
    left: 0;           /* Left edge at left for now */
    right: 0;          /* Right edge at right for now, so full width */ 
    top: 30px;         /* Move it down from top of window */
    width: 500px;      /* Give it the desired width */ 
    margin: auto;      /* Center it */
    max-width: 100%;   /* Make it fit window if under 500px */ 
    z-index: 10000;    /* Whatever needed to force to front (1 might do) */
}

이 방법으로 div를 수평으로 중앙에 배치하는 것이 가능합니다.

html :

<div class="container">
    <div class="inner">content</div>
</div>

CSS :

.container {
    left: 0;
    right: 0;
    bottom: 0; /* or top: 0, or any needed value */
    position: fixed;
    z-index: 1000; /* or even higher to prevent guarantee overlapping */
}

.inner {
    max-width: 600px; /* just for example */
    margin: 0 auto;
}

이 방법을 사용하면 항상 내부 블록을 중앙에 배치 할 수 있으며 또한 예를 들어 작은 화면에서는 유동적으로 반응하는 진정한 반응으로 쉽게 전환 할 수 있으므로 질문 예와 선택한 답변에 제한이 없습니다. .

... 또는 메뉴 div를 다른 것으로 감쌀 수 있습니다.

    <div id="wrapper">
       <div id="menu">
       </div>
    </div>


#wrapper{
         width:800px;
         background: rgba(255, 255, 255, 0.8);
         margin:30px auto;
         border:1px solid red;
    }

    #menu{
        position:fixed;
        border:1px solid green;
        width:300px;
        height:30px;
    }

또 다른 2 분할 솔루션이 있습니다. 간결하고 하드 코딩되지 않은 상태로 유지하려고했습니다. 먼저 예상되는 html :

<div id="outer">
  <div id="inner">
    content
  </div>
</div>

다음 CSS의 원리는 "외부"의 일부를 배치 한 다음 "내부"의 크기를 가정하여 후자를 상대적으로 이동시키는 것입니다.

#outer {
  position: fixed;
  left: 50%;          // % of window
}
#inner {
  position: relative;
  left: -50%;         // % of outer (which auto-matches inner width)
}

이 방법은 Quentin과 비슷하지만 내부 크기는 다양 할 수 있습니다.

전체 화면 래퍼 div를 사용할 때 flexbox 솔루션이 있습니다. 정당화-컨텐츠는 자식 div를 가로로 맞추고 항목을 정렬합니다.

<div class="full-screen-wrapper">
    <div class="center"> //... content</div>
</div>

.full-screen-wrapper { 
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  align-items: center;
}

.center {
  // your styles
}