절대 위치 Div의 중앙 정렬

절대 위치 Div의 중앙 정렬

---

div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

<div id="thing">
   <p>text text text with no fixed size, variable font</p>
</div>

div가 맨 위에 있지만 <center>또는 중앙에 위치 할 수 없습니다 margin: 0 auto.

---

div다음과 같이 고정 너비를 지정 하면 문제가 해결 될 수 있습니다 .

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}

---

div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}

---

내가 파티에 늦었다는 건 알지만, 정확한 너비를 모르는 경우 절대 항목을 가로로 배치해야하는 사람들을 위해 여기서 답변을 제공하겠다고 생각했습니다.

이 시도:

// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

다음과 같이 속성을 조정하기 만하면 수직 정렬이 필요한 경우에도 동일한 기술을 적용 할 수 있습니다.

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

---

수직 및 수평으로 중앙에 배치하려면 다음을 수행하십시오.

div#thing {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

---

상대 너비 (백분율)가 필요한 경우 절대 위치에 div를 래핑 할 수 있습니다.

div#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

요소를 절대적으로 배치하려면 상위 요소를 상대적으로 배치해야합니다.

---

I was having the same issue, and my limitation was that i cannot have a predefined width. If your element does not have a fixed width, then try this

div#thing 
{ 
  position: absolute; 
  top: 0px; 
  z-index: 2; 
  left:0;
  right:0;
 }

div#thing-body
{
  text-align:center;
}

then modify your html to look like this

<div id="thing">
 <div id="thing-child">
  <p>text text text with no fixed size, variable font</p>
 </div>
</div>

---

Yes:

div#thing { text-align:center; }

참고URL : https://stackoverflow.com/questions/252856/center-align-on-a-absolutely-positioned-div