[css] div에서 절대 위치 요소를 가운데에 배치하는 방법은 무엇입니까?

창 중앙에 div(with position:absolute;) 요소 를 배치해야합니다 . 그러나 너비를 알 수 없기 때문에 그렇게하는 데 문제 가 있습니다.

나는 이것을 시도했다. 그러나 너비가 반응하기 때문에 조정해야합니다.

.center {
  left: 50%;
  bottom:5px;
}

어떤 아이디어?

답변

<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      I am some centered shrink-to-fit content! <br />
      tum te tum
    </div>
  </div>
</body>

스 니펫 확장

답변

이것은 나를 위해 작동합니다 :

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

스 니펫 확장

답변

반응 형 솔루션

다음은 IE8 이하를 지원할 필요가없는 경우 반응 형 디자인 또는 알 수없는 크기 에 적합한 솔루션 입니다 .

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

코드 스 니펫 표시

.outer {
    position: relative; /* or absolute */

    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}

<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

스 니펫 확장

JS 피들입니다

단서는 변환이 요소의 너비 / 높이를 기준으로하는 left: 50%반면 부모를 translate기준으로합니다.

이렇게하면 자녀와 부모 모두에게 유연한 너비로 완벽하게 중심이 지정된 요소를 가질 수 있습니다. 보너스 : 자녀가 부모보다 더 큰 경우에도 효과가 있습니다.

또한 이것을 수직으로 가운데에 맞출 수 있습니다 (다시 말해 부모와 자식의 너비와 높이는 완전히 유연하거나 알 수 없음).

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

transform공급 업체 접두사도 필요할 수 있습니다 . 예를 들어-webkit-transform: translate(-50%,-50%);

답변

정말 좋은 게시물. 누군가가 단일 div 태그로 원하는 경우 추가하고 싶었습니다.

로 복용 width중 900px입니다.

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

이 경우 width미리 알아야합니다 .

답변

절대 센터

HTML :

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

CSS :

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

데모 :
http://jsbin.com/rexuk/2/

Chrome, Firefox 및 IE8에서 테스트

도움이 되었기를 바랍니다 🙂

답변

이 작업은 수직 및 수평

  #myContent{
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        bottom:0;
        margin: auto;
   }

부모의 요소 중심을 만들고 싶다면 부모의 위치를 상대적으로 설정하십시오

 #parentElement{
      position:relative
  }

편집하다:

수직 중심의 경우 설정된 높이를 요소에 맞 춥니 다. @Raul 덕분에
부모의 요소 중심을 만들려면 부모의 위치를 상대로 설정하십시오.

답변

솔루션 검색 위의 답변을 받았으며 Matthias Weiler의 중심에있는 내용을 텍스트 정렬을 사용하여 만들 수 있습니다.

#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

크롬과 파이어 폭스와 함께 작동했습니다.