CSS를 사용하여 절대 div를 가로로 가운데에 배치하는 방법은 무엇입니까?

CSS를 사용하여 절대 div를 가로로 가운데에 배치하는 방법은 무엇입니까?

---

div가 있고 가로로 가운데에 배치하고 싶습니다. 중앙에 있지는 않지만 margin:0 auto;...

.container {
    position: absolute;
    top: 15px;
    z-index: 2;
    width:40%;
    max-width: 960px;
    min-width: 600px;
    height: 60px;
    overflow: hidden;
    background: #fff; 
    margin:0 auto;
}

---

left: 0및 을 설정해야합니다 right: 0.

이것은 창의 측면에서 여백 가장자리를 얼마나 멀리 간격 띄우기를 지정합니다.

'상단'과 유사하지만 상자의 오른쪽 여백 가장자리가 상자 포함 블록의 [오른쪽 / 왼쪽] 가장자리의 [왼쪽 / 오른쪽]으로 오프셋되는 거리를 지정합니다.

출처 : http://www.w3.org/TR/CSS2/visuren.html#position-props

참고 : 요소의 너비 는 창 보다 작아야합니다. 그렇지 않으면 창의 전체 너비를 차지합니다.

미디어 쿼리를 사용하여 최소 여백 을 지정한 다음 auto더 큰 화면 크기 로 전환 할 수있는 경우

---

.container {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  width: 40%;

  outline: 1px solid black;
  background: white;
}

<div class="container">
  Donec ullamcorper nulla non metus auctor fringilla.
  Maecenas faucibus mollis interdum.
  Sed posuere consectetur est at lobortis.
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  Sed posuere consectetur est at lobortis.
</div>

---

이것은 IE8에서는 작동하지 않지만 고려해야 할 옵션 일 수 있습니다. 너비를 지정하지 않으려는 경우 주로 유용합니다.

.element
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

---

위의 답변은 정확하지만 초보자에게는 간단하지만 여백, 왼쪽 및 오른쪽을 설정하기 만하면됩니다. 다음 코드는 너비가 설정 되고 위치 가 절대적 인 경우 수행합니다.

margin: 0 auto;
left: 0;
right: 0;

데모:

.centeredBox {
    margin: 0 auto;
    left: 0;
    right: 0;
   
   
   /** Position should be absolute */
    position: absolute;
    /** And box must have a width, any width */
    width: 40%;
    background: #faebd7;
   
   }

<div class="centeredBox">Centered Box</div>

---

Flexbox? flexbox를 사용할 수 있습니다.

.box {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-justify-content: center;
  justify-content: center;

}

.box div {
  border:1px solid grey;
  flex: 0 1 auto;
  align-self: auto;
  background: grey;
}

<div class="box">
  <div class="A">I'm horizontally centered.</div>
</div>

---

.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}

---

따라서 마진과 왼쪽, 오른쪽 속성 만 사용하십시오.

.elements {
 position: absolute;
 margin-left: auto;
 margin-right: auto;
 left: 0;
 right: 0;
}

이 팁에서 더 많은 것을 볼 수 있습니다 => div 요소를 HTML로 중앙에 설정하는 방법-Obinb Blog

---

위치가 절대적 인 경우 중앙에 div를 만들려면이 링크를 사용하십시오.

HTML :

<div class="bar"></div>

CSS :

.bar{
  width:200px;
  border-top:4px solid red;
  position:absolute;
  margin-left:auto;
  margin-right:auto;
  left:0;
  right:0;
}

예 jsfiddle

---

You can't use margin:auto; on position:absolute; elements, just remove it if you don't need it, however, if you do, you could use left:30%; ((100%-40%)/2) and media queries for the max and min values:

.container {
    position: absolute;
    top: 15px;
    left: 30%;
    z-index: 2;
    width:40%;
    height: 60px;
    overflow: hidden;
    background: #fff;
}

@media all and (min-width:960px) {

    .container {
        left: 50%;
        margin-left:-480px;
        width: 960px;
    }

}

@media all and (max-width:600px) {

    .container {
        left: 50%;
        margin-left:-300px;
        width: 600px;
    }

}

참고URL : https://stackoverflow.com/questions/17976995/how-to-center-absolute-div-horizontally-using-css