중심 맞춤 고정 위치 div

중심 맞춤 고정 위치 div

나는 그가 가지고 있는 디브를 얻으려고 노력하고 있습니다.position:fixed내 페이지에 정렬된 가운데.

나는 항상 이 "핵"을 사용하여 절대적으로 위치한 디브로 그것을 할 수 있었습니다.

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

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

이것은 고정 위치 디브에 대해 효과가 없는 것처럼 보이며, 대신 왼쪽 끝 모서리를 50%로 배치하고 마진 왼쪽 선언을 무시합니다.

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

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

Koen의 대답은 그 요소의 중심을 정확히 잡지 못합니다.

올바른 방법은 CSS3를 사용하는 것입니다.transform속성. 일부 이전 브라우저에서는 지원되지 않습니다.우리는 고정적이거나 상대적인 것도 설정할 필요가 없습니다.width.

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

.almost-centered {
    background-color: #eee;
    position: fixed;
    width: 40%;
    text-align: center;
    top: 5%;
    left: 50%;
    padding: 20px;
    margin-left: -20%;
}

.centered {
    background-color: #eee;
    position: fixed;
    width: 40%;
    text-align: center;
    top: 25%;
    left: 50%;
    padding: 20px;
    transform: translate(-50%, 0);
}

<div class="almost-centered">
    I'm almost centered DIV lorem ipmsum
</div>

<div class="centered">
    I'm exactly centered DIV using CSS3
</div>

이와 같은 문제가 있지만 반응성이 뛰어난 설계를 사용하는 경우 다음을 사용할 수도 있습니다.

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. 로 고정된 디브를 가지세요.width: 100%
2. 디브 안에서, 새로운 정적 디브를 만듭니다.margin-left: auto그리고.margin-right: auto아니면 테이블 메이크.align="center".
3. 타다아, 당신은 이제 당신의 고정된 디브를 집중시켰습니다.

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

중심을 수평으로 맞춥니다.

display: fixed;
top: 0; 
left: 0;
transform: translate(calc(50vw - 50%));

높이가 너비와 동일한 경우 수평 및 수직으로 중심을 맞춥니다.

display: fixed;
top: 0; 
left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 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;}

이 작업도 동일해야 합니다.

정상적인 div는 사용해야 합니다.margin-left: auto그리고.margin-right: auto하지만 그것은 고정된 디브에게는 효과가 없습니다.이 방법은 앤드류의 대답과 비슷하지만, 사용되지 않는 것을 사용하지 않습니다.<center>기본적으로, 고정된 디바에게 포장지를 주세요.

#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%);

폭이 400px인 것을 알고 있다면 이것이 가장 쉬운 방법일 것입니다.

 left: calc(50% - 200px);

다음 작업을 간단히 수행할 수 있습니다.

div {
  background:pink;
  padding:20px;
  position:fixed;
  
  inset:0;
  margin:auto;
  width: max-content;
  height: max-content;
}

<div>Some content here</div>

방식접근의 .center { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }는 중심 요소 주위에 빈 공간을 유지하려고 하므로 중심 요소의 너비가 필요한 것보다 작다는 것처럼 이상적이지 않은 경우가 많습니다.

@hyposoc의 답변은 해당 시나리오에서 잘 작동하며 중심 요소의 도달 범위를 뷰포트 측면의 끝까지 확장합니다.그러나 중심 요소는 스크롤 막대를 포함한 전체 뷰포트 중심으로 이동합니다.그러나 사용 사례에서 스크롤 막대 없이 공간 내에서 요소의 중심을 맞춰야 하는 경우 이 수정된 답변을 사용할 수 있습니다.이 접근 방식은 또한 스크롤바 없이 공간에서 요소를 중심으로 하는 전술한 기존 접근 방식과 유사합니다.

수평으로 가운데 맞춤

.horizontal-center {
  position: fixed;
  left: calc((50vw - 50%) * -1); /* add negative value equal to half of the scrollbar width if any */
  transform: translate(calc(50vw - 50%));
}

세로로 가운데 맞춤

.vertical-center {
  position: fixed;
  top: calc((50vh - 50%) * -1);
  transform: translate(0, calc(50vh - 50%));
}

수평 및 수직 중심 맞추기

.center {
  position: fixed;
  left: calc((50vw - 50%) * -1);
  top: calc((50vh - 50%) * -1);
  transform: translate(calc(50vw - 50%), calc(50vh - 50%));
}

이것은 요소가 다른 탐색 모음처럼 페이지 전체에 걸쳐 있는 경우에 작동합니다.

폭: calc (폭: 100% - 중심이 맞지 않는 폭)

예를 들어 측면 탐색 막대가 200px인 경우:

폭: calc(100% - 200ppm);

폭: 70%, 왼쪽: 15%를 사용하면 매우 쉽습니다.

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

다음을 트위터 부트스트랩과 함께 사용했습니다(v3).

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

즉, 고정된 위치에 있는 전체 너비 요소를 만들고 그 안에 용기를 밀어 넣으면 전체 너비를 기준으로 용기가 중앙에 배치됩니다.반응도 좋아야 합니다.

FlexBox를 사용한 솔루션, 완전한 응답성:

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

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