div에서 절대 위치 요소를 가운데에 배치하는 방법은 무엇입니까?

1078

창 중앙에 div(with position:absolute;) 요소 를 배치해야합니다 . 그러나 너비를 알 수 없기 때문에 그렇게하는 데 문제 가 있습니다.

나는 이것을 시도했다. 그러나 너비가 반응하기 때문에 조정해야합니다.

.center {
  left: 50%;
  bottom:5px;
}

어떤 아이디어?

css  css-position  center  absolute 
— 아이 쉬
소스
4
당신의 예를 가지고 절대 센터 예 서로 다른 상황에서 일반화 될 수 있습니다.
— Mihai8
2
에서이 질문에 대한 더 나은 응답이 stackoverflow.com/questions/17976995/...은
— 앤드류 스위프트

답변:

1333 

<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      I am some centered shrink-to-fit content! <br />
      tum te tum
    </div>
  </div>
</body>
스 니펫 확장

— 보 빈스
소스
76
대박. 나를 위해 일했다! 내가 한 가지 문제 : 내가 중심에 둔 이미지가 상당히 커서 외부 div가 페이지의 오른쪽 가장자리를 넘어 가로 스크롤이 발생했습니다. "left"css 속성을 "right"로 바 꾸었습니다. 지금까지는 화면의 왼쪽 가장자리를
— 넘어가도
사용자가 상단에있는 페이지 아래로, overylay 나타납니다 스크롤 무슨 경우, 당신이 그것을 수정 스크롤 문제에 사용 JQuery와에 좋은 아이디어가 될 것입니다 생각하십니까
— PUG
1
스크롤 문제에 대한 한 가지 해결책이 될 수 position: fixed있지만 오버레이의 높이를 알 수없는 경우 오버레이의 스크롤 막대를 구현해야합니다.
— PUG
3
이 기술을 사용할 때 발생하는 사소한 문제가 있습니다. 바깥 쪽 div가 화면의 50 %를 차지하기 때문에 텍스트가 50 % 화면 크기보다 넓은 경우 약간의 이동이 발생합니다. 외부 div를 "width : 100 %"로 설정하고 left 속성을 제거하여이 문제를 해결했습니다. 내부 div의 경우 텍스트 정렬을 가운데로 설정하면됩니다. 이것은 문제를 해결합니다.
— Nicky L.
3
백분율 높이는이 경우 포함 블록을 기준으로합니다 <html>. 그러나 <html>요소에 height지정되어 있지 않으므로 문서의 모든 내용의 높이를 가져옵니다. 유일한 내용은 절대적으로 배치되므로 (내용 흐름에서 벗어남). 추가 height: 100%받는 <html>요소는이에 차이가 있습니다.
— bobince
1801

이것은 나를 위해 작동합니다 :

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>
스 니펫 확장

— 마티아스 와일러
소스
36
난 그냥 부정적인 마진이 완벽하게 유효한 CSS하고 있어야 걸쳐 싶어 하지 는 "더러운 해킹"으로 간주 될 수있다. 음수 마진은 W3C 상자 모델 사양에 언급되어 있습니다. 일부 개인은 a) 자신에게 무지하거나 b) 나쁜 CSS를 수정하는 데 사용하기 때문에 해킹이라고 임의로 결정하는 것 같습니다.
— Joseph Ravenwolfe
58
중심이 될 div의 너비를 설정해야합니다-텍스트가있는 버튼과 같이 자동으로 작동하지 않습니다.
— Stefan
2
@Joshua 이것은 다른 답변처럼 세로가 아닌 가로로만 중앙에 위치합니다.
— ygoe
3
뷰포트 크기를 늘리지 않기 때문에이 솔루션을 선호합니다.
— iceydee
13
브라우저 간 지원 : width이 기능을 사용하려면 특정 값으로 설정해야합니다. auto및 100%요소를 중심으로하지 않습니다. display: block;필수이다. position: absolute;필수는 아닙니다. 모든 값이 작동합니다. 부모 요소 position가 아닌 다른 것으로 설정되어야합니다 static. 설정 left하고 right하는 것은 0불필요합니다. margin-left: auto; margin-right: auto;일을 할 것입니다.
— Onur Yıldırım
767

반응 형 솔루션

다음은 IE8 이하를 지원할 필요가없는 경우 반응 형 디자인 또는 알 수없는 크기 에 적합한 솔루션 입니다 .

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

코드 스 니펫 표시

JS 피들입니다

단서는 변환이 요소의 너비 / 높이를 기준으로하는 left: 50%반면 부모를 translate기준으로합니다.

이렇게하면 자녀와 부모 모두에게 유연한 너비로 완벽하게 중심이 지정된 요소를 가질 수 있습니다. 보너스 : 자녀가 부모보다 더 큰 경우에도 효과가 있습니다.

또한 이것을 수직으로 가운데에 맞출 수 있습니다 (다시 말해 부모와 자식의 너비와 높이는 완전히 유연하거나 알 수 없음).

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

transform공급 업체 접두사도 필요할 수 있습니다 . 예를 들어-webkit-transform: translate(-50%,-50%);

— Sumits의 문제
소스
26
IE7 지원이 더 이상 필요하지 않으면 이것이 사실상 해결책이어야합니다. 이 솔루션은 왼쪽 : 0 / 오른쪽 : 0 기술보다 낫습니다. 왜냐하면 요소를 전체 너비로 만들고 너비를 유지하고 알 수없는 너비의 요소에서 작동하기 때문입니다.
— aleemb
51
가장 좋은 대답은 div가 포함 된 상자가 자식보다 작은 경우 작동합니다.
— Case
2
@ChadJohnson은 물론입니다. webkit-내가 제안한 접두사로 시도하십시오 .
— ProblemsOfSumit
2
아, -webkit에 대한 메모를 놓쳤습니다. 대박.
— 채드 존슨
3
transform: translateposition: fixed어린이 에게는 사용할 수없는 것 같습니다 . 이 경우 허용되는 답변이 더 효과적입니다.
— dmvianna
49

정말 좋은 게시물. 누군가가 단일 div 태그로 원하는 경우 추가하고 싶었습니다.

로 복용 width중 900px입니다.

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

이 경우 width미리 알아야합니다 .

— 프라 티카 부
소스
26
"because the width is unknown"... 이것은 질문에 대답하지 않습니다
— Michel Ayres
15
안녕하세요 @Michel 실제로 절대 div의 중심을 맞추는 것과 관련된 것을 Google 검색 할 때이 링크가 첫 번째 링크로 제공됩니다. 그래서 나 같은 사람이 위의 솔루션을 검색하는 경우에 대비하여이 솔루션을 추가 한 것입니다 .. :)
— pratikabu
1
반응 형 디자인에는 그다지 유용하지 않지만 반응 형 디자인을 시작하기 전까지는 효과가있었습니다. 이것은 절대적으로 알려진 알려진 너비 요소 를 중앙에 배치하기위한 올바른 답입니다 .
— Sean Kendle 2014 년
35

절대 센터

HTML :

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

CSS : 

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

데모 : http://jsbin.com/rexuk/2/

Chrome, Firefox 및 IE8에서 테스트

도움이 되었기를 바랍니다 :)

— 이자 스 아 미누 데 엔
소스
작동하지 않습니다. 다음 codepen codepen.io/anon/pen/YqWxjJ
— Mark
1
죄송하지만 이것이 작동한다고 생각하지만 고정 된 높이와 너비의 codepen.io/anon/pen/WwxEYQ
— Mark
31

이 작업은 수직 및 수평 

  #myContent{
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        bottom:0;
        margin: auto;
   }

부모의 요소 중심을 만들고 싶다면 부모의 위치를 ​​상대적으로 설정하십시오

 #parentElement{
      position:relative
  }

편집하다:

  • 수직 중심의 경우 설정된 높이를 요소에 맞 춥니 다. @Raul 덕분에

  • 부모의 요소 중심을 만들려면 부모의 위치를 ​​상대로 설정하십시오.

— 모센 압 돌라 히
소스
2
수직이 작동하려면 높이를 추가해야한다고 생각합니다.
— Raul
다른 요소의 중심이 아니라 페이지의 중심에 위치하는 것처럼 보입니다.
— Günter Zöchbauer
1
@ GünterZöchbauer 네, 부모의 요소 중심을 원한다면 부모의 위치를 ​​설정하십시오.
— Mohsen Abdollahi
20

솔루션 검색 위의 답변을 받았으며 Matthias Weiler의 중심에있는 내용을 텍스트 정렬을 사용하여 만들 수 있습니다.

#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

크롬과 파이어 폭스와 함께 작동했습니다.

— cavila
소스
5
"텍스트 정렬 : 센터"가 필요하지 않은 것 같습니다
— Tobias
이것은 내 문제를 여기에서 해결 했습니다 . 감사!
— Volomike
"text-align : center"가 필요했는데 @ProblemsOfSumit에서 제안한 솔루션이 텍스트 줄 바꿈으로 작동하지 않는 곳에서 작동했습니다.
— Nat
15

** 응답 솔루션 **

div의 요소를 가정하면 다른 div입니다 ...

이 솔루션은 잘 작동합니다

<div class="container">
  <div class="center"></div>
</div>

용기는 임의의 크기 일 수있다 (상대 위치 여야)

.container {
position: relative;/*important*/
width: 200px;/*any width*/
height: 200px;/*any height*/
background: red;
}

요소 ( div )는 모든 크기 일 수 있습니다 ( 컨테이너보다 작아야 함 )

.center {
position: absolute;/*important*/
top: 50%;/*position Y halfway in*/
left: 50%;/*position X halfway in*/
transform: translate(-50%,-50%);/*move it halfway back(x,y)*/
width: 100px;/*any width*/
height: 100px;/*any height*/
background: blue;
}

결과는 다음과 같습니다. 코드 스 니펫을 실행

.container {
	position: relative;
	width: 200px;
	height: 200px;
	background: red;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100px;
	height: 100px;
	background: blue;
}
<div class="container">
	<div class="center"></div>
</div>
스 니펫 확장

나는 그것이 매우 도움이된다는 것을 알았다

— RealMJDev
소스
1
천재. 왜 다른 사람이 이것을 내놓지 않았습니까?
— mesqueeb
감사합니다, 행복한 코딩
— RealMJDev
13

이것은 다른 답변의 혼합으로 우리에게 도움이되었습니다.

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}
— 충돌
소스
좋은 고마워 고마워!
— 스탠리 베이츠와 르
12

나는이 질문에 이미 몇 가지 대답이 있음을 이해하지만, 거의 모든 클래스에서 작동하고 이해하기 쉽고 우아한 솔루션을 찾지 못했습니다. 여기에 무리를 조정 한 후 취해야 할 사항이 있습니다.

.container {
    position: relative;
}

.container .cat-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
    background-color: white;
}

.color-block {
  height: 250px;
  width: 100%;
  background-color: green;
}
<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>
스 니펫 확장

이것이 말하는 것은 나에게 a top: 50%와 a를 주고 , "미러 공간을 만든다"는 의미에서 left: 50%X / Y 축의 -50%값으로 변환 (공간을 만든다) 하는 것이다.

따라서 이것은 div의 4 점 모두에 동일한 공간을 만듭니다. 이는 항상 상자입니다 (4면이 있음).

이것은 :

  1. 부모의 키 / 너비를 알 필요없이 작업하십시오.
  2. 반응 형으로 작업하십시오.
  3. X 또는 Y 축에서 작업하십시오. 또는 내 예와 같이 둘 다.
  4. 작동하지 않는 상황을 생각해 낼 수 없습니다.
— 다니엘 모스
소스
그래도 문제가 해결되지 않으면 알려주세요. 입력하여 질문을 편집 할 수 있습니다.
— Daniel Moss
변형 / 번역은 사파리가 텍스트를 특정 비율로 흐리게
— James Tan
@DanielMoss 사용하지 않는 이유는 translate(-50%,-50%);무엇입니까?
— Mark Baijens
12

컨테이너 요소의 중앙에 원하는 절대 위치 요소의 임의의 알 수없는 너비에서 작동합니다.

데모

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
— 로우 테크 선
소스
9

Flex는 절대 위치 div를 중앙에 배치하는 데 사용할 수 있습니다.

display:flex;
align-items:center;
justify-content:center;

코드 스 니펫 표시

— 다발 자르도 쉬
소스
내 화면에 -Firefox 68.x, 그것은 정렬되지 않습니다, 절대 블록은 상대 블록의 하단에 나타납니다
— Webwoman
당신은 이것을 시도 할 수 있습니까 display: -webkit-flex;?
— Dhaval Jardosh
7

내가 아는 한, 이것은 알 수없는 너비에 도달하는 것이 불가능합니다.

시나리오에서 작동하는 경우 너비와 높이가 100 % 인 보이지 않는 요소를 절대로 배치하고 여백을 사용하여 요소를 중앙에 배치 할 수 있습니다 : 자동 및 수직 정렬. 그렇지 않으면 Javascript가 필요합니다.

— 페카
소스
"여백 : 자동"에 +1. "margin : 0 auto"-세로 여백에 적용되는 "0"및 가로 "auto"를 사용하여 div를 가로로 가운데에 배치하기 전에이 작업을 시도했습니다. 이것이 StackOverflow가 최상위 레벨 div에 사용되어 페이지 측면에 두꺼운 흰색 테두리 2 개를 얻는 것으로 생각합니다. 그러나 CSS 여백에 대한 W3Schools 페이지는 "이 결과는 브라우저에 따라 다릅니다"라는 자동 값을 나타냅니다. 개인적으로 여러 브라우저에서 시도하지 않았으므로이 시점에서 실제로 의견을 말할 수는 없습니다. 그것은 분명히 그들 중 일부에서 트릭을 수행합니다)
— Steg
1
IE8이 문제가되지 않으면 알 수없는 너비 (및 높이)가 가능합니다. 자세한 내용은 내 답변을 참조하십시오.
— ProblemsOfSumit
7

@bobince의 답변에 추가하고 싶습니다 :

<body>
    <div style="position: absolute; left: 50%;">
        <div style="position: relative; left: -50%; border: dotted red 1px;">
            I am some centered shrink-to-fit content! <br />
            tum te tum
        </div>
    </div>
</body>

개선 : /// 이렇게하면 가로 스크롤 막대가 가운데 div에 큰 요소와 함께 표시되지 않습니다.

<body>
    <div style="width:100%; position: absolute; overflow:hidden;">
        <div style="position:fixed; left: 50%;">
            <div style="position: relative; left: -50%; border: dotted red 1px;">
                I am some centered shrink-to-fit content! <br />
                tum te tum
            </div>
        </div>
    </div>
</body>
— 약병
소스
6

이를 수행하는 유용한 jQuery 플러그인이 있습니다. 찾을 여기 . CSS로만 가능하다고 생각하지 않습니다.

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height(); 
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": 'absolute', "left": w_total+"px", "top":
h_total+"px"};
            el.css(css)
    });
};
— 벤 셜록
소스
이것은 더 나은 방법이며, 특히 repsonsive 디자인에 적합합니다.
— m4tm4t 2016 년
jQuery가 어떤 경우에도 사용된다면 사소한 것입니다
— Code Whisperer
8
이것은 더 좋은 방법이 아닙니다. 가능할 때마다 항상 CSS를 사용하는 것이 좋습니다. 모든 축에서 CSS를 사용하고 반응 형 페이지를 위해 DIV를 중심에 배치 할 수 있습니다. JavaScript가 필요 없습니다!
— ProblemsOfSumit
1
@yckart이며이 경우 도구는 CSS입니다.
— ProblemsOfSumit
5

위의 반응 형 솔루션의 sass / compass 버전 :

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}
— 아담 스펜스
소스
4
transform: translate(-50%, -50%)웹킷 브라우저를 사용하여 OS X에서 텍스트 및 기타 모든 컨텐츠를 흐리게합니다. keithclark.co.uk/articles/gpu-text-rendering-in-webkit
— Yasha
-webkit-font-smoothing: antialiased;btw 게시 한 기사에서 수집 한 앤티 앨리어싱 유형 만 사용하십시오 !
— Adam Spence
4

내가 선호하는 센터링 방법 :

position: absolute;
margin: auto;
width: x%
  • 절대 블록 요소 위치
  • 여백 자동
  • 같은 왼쪽 / 오른쪽, 위 / 아래

여기 JSFiddle

— vp_arth
소스
4

이것은 나를 위해 일했다 :

<div class="container><p>My text</p></div>

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
— 앨런
소스
5 년 후 @Matthias Weiler의 답변입니다.
— codidact.com로 이동 aloisdg
3

나는 이미 답변을 제공했으며 다른 사람들과 함께 이전 답변은 잘 작동한다는 것을 알고 있습니다. 그러나 나는 이것을 과거에 사용해 왔으며 특정 브라우저 및 특정 상황에서 더 잘 작동합니다. 그래서 id 도이 답변을 제공한다고 생각했습니다. 이전 답변을 "수정"하지 않았습니다. 이것이 완전히 별도의 답변이고 내가 제공 한 두 가지는 관련이 없다고 생각하기 때문에 추가했습니다.

HTML :

<div id='parent'>
  <div id='child'></div>
</div>

CSS :

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}
— 더스틴 포 아상
소스
3 
#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}
— 부 쿠르 아카 콜루
소스
2

요소가있는 경우이 솔루션은 작동 width및height 

.wrapper {
  width: 300px;
  height: 200px;
  background-color: tomato;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
<div class="wrapper">
  <div class="content"></div>
</div>
스 니펫 확장

— 모
소스
2

이 질문에 대한 해결책이 제 경우에는 효과가 없었습니다 .. 일부 이미지에 자막을 작성하고 있으며 이것을 사용하여 해결했습니다.

top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

display: flex;
align-items: center;

figure {
  position: relative;
  width: 325px;
  display: block
}


figcaption{
   
    position: absolute;
    background: #FFF;
    width: 120px;
    padding: 20px;

    -webkit-box-shadow: 0 0 30px grey;
    box-shadow: 0 0 30px grey;
    border-radius: 3px;
    display: block;
    
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    align-items: center;
}
<figure>
  <img  src="https://picsum.photos/325/600">
  <figcaption> 
			But as much
    </figcaption>
                
</figure>
스 니펫 확장

— 마르코 파서
소스
1

HTML :

<div class="wrapper">
    <div class="inner">
        content
    </div>
</div>

CSS :

.wrapper {
    position: relative;

    width: 200px;
    height: 200px;

    background: #ddd;
}

.inner {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;

    width: 100px;
    height: 100px;

    background: #ccc;
}

여기에 더 많은 예제가 있습니다.

1

이것은 페이지 중앙에 DIV를 정확하게 띄우기 위해 알아 낸 요령입니다. 물론 못 생겼지 만 모두 작동합니다

점과 대시

<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
    <table style="position:fixed;" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="width:200;border: 5 dashed green;padding:10">
                    Perfectly Centered Content
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

청소기

5 년이 지났지?

<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
    <tr>
        <td style="width:50%"></td>
        <td style="text-align:center">
            <div style="padding:10px">
                <img src="Happy.PM.png">
                <h2>Stays in the Middle</h2>
            </div>
        </td>
        <td style="width:50%"></td>
    </tr>
</table>

— 미스터 B
소스
1 
.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}
— AndreyP
소스
0

이미지를 div에 배치하고 div ID를 추가하고 해당 div의 CSS에 text-align:center

HTML :

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS :

#intro_img {
    text-align:center;
}
— 도빈 본 스트 랜글
소스
0 

#content { margin:0 auto; display:table; float:none;}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>
스 니펫 확장

— 벤드를 막다
소스
0

알 수없는 너비의 블록을 가로로 가운데에 배치하는 간단한 접근법 :

<div id="wrapper">
  <div id="block"></div>
</div>
#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

텍스트 정렬 속성을 #block 규칙 세트에 추가하여 블록의 정렬과 무관하게 내용을 정렬 할 수 있습니다.

이것은 최신 버전의 Firefox, Chrome, IE, Edge 및 Safari에서 작동했습니다.

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