100 % 너비 div 안에 절대 위치 요소를 수평으로 가운데에 배치하려면 어떻게합니까?

100 % 너비 div 안에 절대 위치 요소를 수평으로 가운데에 배치하려면 어떻게합니까? [복제]

---

이 질문에는 이미 답변이 있습니다.

• div에서 절대적으로 배치 된 요소를 가운데에 배치하는 방법은 무엇입니까? 답변 33 개

아래 예에서 #logo절대 위치에 있으며 가로 중심에 있어야합니다 #header. 일반적으로 margin:0 auto상대적으로 배치 된 요소를 수행하지만 여기에 붙어 있습니다. 누군가 나에게 길을 보여줄 수 있습니까?

JS 피들 : http://jsfiddle.net/DeTJH/

HTML

<div id="header">
    <div id="logo"></div>
</div>

CSS

#header {
    background:black;
    height:50px;
    width:100%;
}

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px
}

---

왼쪽 속성 중심을 정렬하려는 경우.
상단 정렬에 대해서도 마찬가지입니다. margin-top : (div의 너비 / 2) 개념은 왼쪽 속성과 같습니다.
헤더 요소를 position : relative로 설정하는 것이 중요합니다.
이 시도:

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    left:50%;
    margin-left:-25px;
}

데모

계산을 사용하지 않으려면 다음을 수행하십시오.

#logo {
  background:red;
  width:50px;
  height:50px;
  position:absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

데모 2

---

로고를 가운데에 맞추려면 left및 right속성 0값을 모두 할당해야합니다 margin: auto.

따라서이 경우 :

#logo {
  background:red;
  height:50px;
  position:absolute;
  width:50px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

에 position: relative대해 설정할 수도 있습니다 #header.

이 설정 때문에 작동 left및 right수평 절대 위치 요소를 늘릴 것 제로에. margin로 설정 하면 마법이 발생 합니다 auto. margin모든 여분의 공간 (같은면에 동일하게)을 차지하여 내용을 지정된 공간으로 남겨 둡니다 width. 이로 인해 컨텐츠가 가운데 정렬됩니다.

---

calc답변에서 사용이 누락되어 더 깨끗한 솔루션입니다.

#logo {
  position: absolute;
  left: calc(50% - 25px);
  height: 50px;
  width: 50px;
  background: red;
}

대부분의 최신 브라우저에서 작동합니다 : http://caniuse.com/calc

Maybe it's too soon to use it without a fallback, but I thought maybe for future visitors it would be helpful.

---

In my experience, the best way is right:0;, left:0; and margin:0 auto. This way if the div is wide then you aren't hindered by the left: 50%; that will offset your div which results in adding negative margins etc.

DEMO http://jsfiddle.net/kevinPHPkevin/DeTJH/4/

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    margin:0 auto;
    right:0;
    left:0;
}

---

here is the best practiced method to center a div as position absolute

DEMO FIDDLE

code --

#header {
background:black;
height:90px;
width:100%;
position:relative; // you forgot this, this is very important
}

#logo {
background:red;
height:50px;
position:absolute;
width:50px;
margin: auto; // margin auto works just you need to put top left bottom right as 0
top:0;
bottom:0;
left:0;
right:0;
}

---

Its easy, just wrap it in a relative box like so:

<div class="relative">
 <div class="absolute">LOGO</div>
</div>

The relative box has a margin: 0 Auto; and, important, a width...

참고URL : https://stackoverflow.com/questions/16758102/how-do-i-horizontally-center-an-absolute-positioned-element-inside-a-100-width