고정 된 div의 CSS 수평 중심?

고정 된 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를 다른 것으로 감쌀 수 있습니다.

    <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;
    }

---

이 방법으로 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;
}

Using this way you will have always your inner block centered, in addition it can be easily turned to true responsive (in the example it will be just fluid on smaller screens), therefore no limitation in as in the question example and in the chosen answer.

---

Here's another two-div solution. Tried to keep it concise and not hardcoded. First, the expectable html:

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

The principle behind the following css is to position some side of "outer", then use the fact that it assumes the size of "inner" to relatively shift the latter.

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

This approach is similar to Quentin's, but inner can be of variable size.

---

Here's a flexbox solution when using a full screen wrapper div. justify-content centers it's child div horizontally and align-items centers it vertically.

<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
}

참고URL : https://stackoverflow.com/questions/3157372/css-horizontal-centering-of-a-fixed-div