CSS를 사용하여 절대 디브를 수평으로 센터링하는 방법?

CSS를 사용하여 절대 디브를 수평으로 센터링하는 방법?

나는 디브가 있는데 수평으로 중심을 잡아주길 원합니다 - 비록 내가 주는 것이지만.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.

창의 측면에서 여백 모서리를 어느 정도 간격띄우기할지 지정합니다.

'top'과 유사하지만 상자의 오른쪽 여백 모서리가 상자에 들어 있는 블록의 [오른쪽/왼쪽] 모서리의 [왼쪽/오른쪽] 모서리로 오프셋되는 거리를 지정합니다.

출처: 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;

폭에 대해서도 다음과 같은 다른 값을 사용할 수 있습니다.max-content,fit-content단위를 사용하여 값을 설정하고 싶지 않은 경우

데모:

.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>

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

플렉스박스?플렉스박스를 사용할 수 있습니다.

.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>

매우 쉽고 여백과 왼쪽, 오른쪽 속성만 사용합니다.

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

자세한 내용은 이 팁에서 확인하실 수 있습니다 => html - 오빈블로그에서 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

중앙에 세로, 가로로 모두 사용left:50%;top:50%; transform: translate(-50%, -50%);

.centeredBox {
    margin: 0 auto;
    left: 50%;
    top:50%;
   
   
   /** Position should be absolute */
    position: absolute;
    /** And box must have a width, any width */
    width: 40%;
    background: #faebd7;
    text-align: center;
    padding:10px;
    transform: translate(-50%, -50%);
   
   }

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

사용할 수 없습니다.margin:auto;위에position:absolute;elements, 필요없으면 그냥 제거해주세요, 하지만 필요하다면 사용할 수 있습니다.left:30%;((100%-40%)/2) 및 최대값과 최소값에 대한 미디어 쿼리:

.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