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


177

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;
}


@LoganMzz이 질문의 너비가 알려진 것이 아닙니다.
Davbog

답변:


408

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>


38
참고 : width필수입니다!
Ijas Ameenudeen

2
네. "text-align : center;"를 사용하는 것이 맞습니다. "왼쪽 : 0; 오른쪽 : 0;" 수평 중앙을 유지하면서 div의 절대 위치를 지정할 수 있습니다.
스털링 본

3
@ AlexG IE11에서 바이올린을 방금로드했는데 작동합니다. 당신은 명확히 할 수 있습니까?
Brian Webster

1
그것은 IE11에서 작업을 수행 @AlexG 것은 그러나 그것은 하지 않습니다 작업 당신은 선언하지 않는 경우 폭을 . 나는 같은 문제가 있었다. 예제와 같이 너비를 사용해야합니다.
파나마 잭

1
또한 필요한 margin: auto우리의 경우 작업에 대한
Crashalot

124

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

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

그것은 아마도 그의 프로젝트 요구 사항에 달려있을 것입니다.
Kris Selbekk '11

3
이 시점에서도 Safari에서 작동하려면 -webkit- 접두사가있는 규칙이 여전히 필요합니다.
Shikkediel

불행히도 그것은 어떻게 든 주변 div의 투명성을 내부 텍스트에도 적용합니다 ..
dnl.re

1
이것은 분명히 답입니다. 나에게 너비를 구체적으로 설정하는 것은 절대 불가능합니다.
마이크

14

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

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>


1
이 부트 스트랩 열의 행에 절대 이미지를 완벽 일
ZachNag

5

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>


이것은 실제로 나의 독특한 경우에 아름답게 작동했습니다. left: 0; right: 0;자식 요소에 배경색이 left: 50%; transform: translateY(-50%);있었기 때문에 옵션이 아니었고 100 %로 확장 되었으므로 자식을 50 % 너비로 제한했기 때문에 작동하지 않았습니다. 이것은 자녀의 유연한 차원을 유지하는 유일한 솔루션이었습니다 (브라우저 지원으로 만 제한됨). 감사!
벤 다이어

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


0

위치가 절대적 인 경우 중앙에 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


-1

당신은 사용할 수 없습니다 margin:auto;position:absolute;당신이 필요하지 않은 경우 당신이 할 경우, 당신은 사용할 수 있습니다, 그러나, 제거, 요소 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;
    }

}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.