고정 디브의 CSS 수평 중심화?

고정 디브의 CSS 수평 중심화?

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

저는 이 질문이 아주 많이 있다는 것을 알지만, 저는 제 사건에 대한 해결책을 찾을 수 없습니다.화면에 고정되어 있어야 하는 div가 있습니다. 페이지가 스크롤되더라도 항상 화면 중앙에 있어야 합니다!

디브가 그랬어야 했어요500px너비, 있어야 합니다.30px모든 브라우저 크기에 대해 페이지 중앙에 수평으로 위치해야 하며, 페이지의 나머지 부분을 스크롤할 때 이동하면 안 됩니다.

그게 가능한가요?

여기서의 답은 구식입니다.이제 당신은 마진을 하드 코딩하지 않고 CSS3 변환을 쉽게 사용할 수 있습니다.너비가 없거나 동적 너비가 없는 요소를 포함하여 모든 요소에 적용됩니다.

수평 중심:

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

수직 중심:

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

수평 및 수직 모두:

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

호환성은 문제가 아닙니다. http://caniuse.com/ #vmx=vmxs2d

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

인라인 블록을 사용하는 것이 옵션인 경우 다음과 같은 방법을 사용하는 것이 좋습니다.

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

이 방법을 사용하면 항상 내부 블록이 중앙에 배치되며, 또한 실제 반응성으로 쉽게 전환될 수 있습니다(이 예에서는 작은 화면에서 유동적일 수 있음). 따라서 질문 예제 및 선택한 답변과 같이 제한이 없습니다.

여기 또 다른 2-div 솔루션이 있습니다.하드 코딩되지 않고 간결하게 유지하려고 했습니다.첫째, 예상 가능한 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 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 {
   left: calc((100vw - 100%) / 2);
}

전체 화면 래퍼 div를 사용할 때 플렉스박스 솔루션을 사용합니다. prejust-content centers it의 하위 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
}

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