고정 위치 div 중앙 정렬

고정 위치 div 중앙 정렬

---

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

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

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

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

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

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

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

---

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

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

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

---

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

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

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

여기서 jsfiddle 비교 작업 .

---

이것에도 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를 중앙에 배치했습니다.

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

---

Normal divs should use margin-left: auto and margin-right: auto, but that doesn't work for fixed divs. The way around this is similar to Andrew's answer, but doesn't use the deprecated <center> thing. Basically, just give the fixed div a wrapper.

#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

This will center a fixed div within a div while allowing the div to react with the browser. i.e. The div will be centered if there's enough space, but will collide with the edge of the browser if there isn't; similar to how a regular centered div reacts.

---

If you know the width is 400px this would be the easiest way to do it I guess.

 left: calc(50% - 200px);

---

If you want to center aligning a fixed position div both vertically and horizontally use this

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

---

This works if you want the element to span across the page like another navigation bar.

width: calc (width: 100% - width whatever else is off centering it)

For example if your side navigation bar is 200px:

width: calc(100% - 200px);

---

I used the following with Twitter Bootstrap (v3)

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

I.e make a full width element that is fixed position, and just shove a container in it, the container is centered relative to the full width. Should behave ok responsively too.

---

It is quite easy using width: 70%; left:15%;

Sets the element width to 70% of the window and leaves 15% on both sides

---

A solution using flex box; fully responsive:

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

child_div {
    /* whatever you want */
}

---

if you don't want to use the wrapper method. then you can do this:

.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 */
}

---

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

This should do the same.

참고URL : https://stackoverflow.com/questions/2861247/center-aligning-a-fixed-position-div