고정 위치 div 중앙 정렬

position:fixed내 페이지에 가운데 정렬 된 div를 얻으려고 합니다.

저는 항상이 "해킹"을 사용하여 절대 위치 div로 할 수있었습니다.

left: 50%; width: 400px; margin-left:-200px

... 여백-왼쪽 값은 div 너비의 절반입니다.

이것은 고정 위치 div에서는 작동하지 않는 것 같습니다. 대신 가장 왼쪽 모서리가 50 %에 배치되고 margin-left 선언을 무시합니다.

고정 위치 요소를 중앙에 정렬 할 수 있도록이 문제를 해결하는 방법에 대한 아이디어가 있습니까?

그리고 위에서 설명한 방식보다 절대적으로 배치 된 요소를 중앙 정렬하는 더 나은 방법을 알려 주시면 보너스 M & M을 제출하겠습니다.

Koen의 대답은 요소를 정확히 중앙에 배치하지 않습니다.

적절한 방법은 CCS3 transform재산 을 사용하는 것 입니다. 일부 오래된 브라우저에서는 지원되지 않지만 . 또한 고정 또는 상대를 설정할 필요도 없습니다 width.

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

여기서 jsfiddle 비교 작업 .

이와 동일한 문제가 있지만 반응 형 디자인의 경우 다음을 사용할 수도 있습니다.

width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;

이렇게하면 div반응 형 디자인에서도 항상 화면 중앙에 고정이 유지됩니다 .

이것에도 flexbox를 사용할 수 있습니다.

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  /* this is what centers your element in the fixed wrapper*/
  display: flex;
  flex-flow: column nowrap;
  justify-content: center; /* aligns on vertical for column */
  align-items: center; /* aligns on horizontal for column */
  
  /* just for styling to see the limits */
  border: 2px dashed red;
  box-sizing: border-box;
}

.element {
  width: 200px;
  height: 80px;

  /* Just for styling */
  background-color: lightyellow;
  border: 2px dashed purple;
}

<div class="wrapper"> <!-- Fixed element that spans the viewport -->
  <div class="element">Your element</div> <!-- your actual centered element -->
</div>

위의 게시물에서 가장 좋은 방법은

1. 고정 div가 있습니다. width: 100%
2. div 내부에서 margin-left: autoand를 사용하여 새 정적 div를 margin-right: auto만들거나 table make it align="center".
3. Tadaaaah, 이제 고정 div를 중앙에 배치했습니다.

이것이 도움이되기를 바랍니다.

일반 div를 사용해야 margin-left: auto하고 margin-right: auto, 그러나 그것은 고정 된 div 작동하지 않습니다. 이 문제를 해결하는 방법은 Andrew의 대답 과 비슷 하지만 더 이상 사용되지 않는 <center>것을 사용하지 않습니다 . 기본적으로 고정 div에 래퍼를 제공하십시오.

#wrapper {
    width: 100%;
    position: fixed;
    background: gray;
}
#fixed_div {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100px;
    height: 30px;
    text-align: center;
    background: lightgreen;
}

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

이렇게하면 div가 브라우저와 반응 할 수 있도록하면서 div 내에 고정 div가 중앙에 배치됩니다. 즉, 충분한 공간이 있으면 div가 중앙에 배치되지만, 그렇지 않으면 브라우저의 가장자리와 충돌합니다. 일반 중심 div가 반응하는 방식과 유사합니다.

고정 위치 div를 수직 및 수평으로 중앙 정렬하려면 이것을 사용하십시오.

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

<div class="container-div">
  <div class="center-div">

  </div>
</div>

.container-div {position:fixed; left: 0; bottom: 0; width: 100%; margin: 0;}
.center-div {width: 200px; margin: 0 auto;}

이것은 동일해야합니다.

너비가 400px라는 것을 안다면 이것이 가장 쉬운 방법이라고 생각합니다.

 left: calc(50% - 200px);

요소가 다른 탐색 모음처럼 페이지 전체에 걸쳐 있도록하려면 작동합니다.

width : calc (width : 100 %-너비가 중앙에서 벗어난 너비)

예를 들어 측면 탐색 메뉴가 200px 인 경우 :

너비 : calc (100 %-200px);

폭 : 70 %; 왼쪽 : 15 %;

요소 너비를 창의 70 %로 설정하고 양쪽에 15 %를 남겨 둡니다.

Twitter Bootstrap (v3)에서 다음을 사용했습니다.

<footer id="colophon" style="position: fixed; bottom: 0px; width: 100%;">
    <div class="container">
        <p>Stuff - rows - cols etc</p>
    </div>
</footer>

즉, 고정 된 위치에있는 전체 너비 요소를 만들고 그 안에 컨테이너를 밀어 넣으면 컨테이너는 전체 너비에 대해 상대적으로 중앙에 위치합니다. 반응 적으로도 괜찮게 행동해야합니다.

플렉스 박스를 사용하는 솔루션; 완전 반응 :

parent_div {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
}

child_div {
    /* whatever you want */
}

래퍼 방법을 사용하지 않으려는 경우. 그런 다음 이렇게 할 수 있습니다.

.fixed_center_div {
  position: fixed;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -100px; /* 50% of width */
  margin-top: -100px; /* 50% of height */
}