css 절대 위치는 margin-left : auto margin-right : auto와 함께 작동하지 않습니다.

82

div 태그에 다음 CSS를 적용했다고 가정 해 보겠습니다.

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

margin-left 및 margin-right가 적용되지 않습니다.

그러나 친척이 있으면 잘 작동합니다.

,divtagREL {
position: relative;
margin-left: auto;  
 margin-right:auto;
}

왜 그런 겁니까? 요소를 중앙에 배치하고 싶습니다.

누군가 절대 위치에서 여백을 자동으로 설정하는 것이 작동하지 않는 이유를 설명 할 수 있습니까?

html css position

— user1118019
소스

그냥 사용하십시오 margin: auto;. 절대 위치를 사용하면 다른 모든 스타일 요소 (위치 등 관련)는 무시됩니다.

— hjpotter92

<center> 태그로 감싸고 .divtagABS의 너비를 100 %로 설정합니다.

— 클로이

확인할 수 있습니다. 일부는이 진술이 구식이라고 말했지만 position: absolute;IE Edge에서 중심화되지 않은 오류를 발견했습니다 .

— WoodrowShigeru

157

편집 :이 대답은 절대적으로 배치 된 요소를 중앙에 배치 할 수 없다고 주장하는 데 사용 margin: auto;되었지만 이것은 사실이 아닙니다. 이것이 가장 많이 찬성되고 받아 들여지는 답변이기 때문에 나는 그것을 옳게 바꾸는 것이라고 생각했습니다.

다음 CSS를 요소에 적용 할 때

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

그런 다음 요소에 고정 된 너비와 높이 (예 : 200px 또는 40 %)를 지정하면 요소 가 중앙에 배치됩니다.

여기 바이올린 효과를 보여줍니다.

— 케빈 보워 소스
소스

3

url : vision.to/articles/margins-and-absolute-positioning.php 가 작동하지 않습니다. 교체하십시오

— chrmod

2

"절대 위치와 중심 요소가 될 수있다 ..."사실이다 하지 참 : 키 모두 설정하는 top/bottom/left/right에 속성을 0선포 width하고 height그 후, margin: auto자동적으로 절대 위치 요소 중심 것이다. 참조 : Absolute Centering technique ; Smashing Magazine 에도 있습니다 .

— DynamicDispatch 2016

2

그리고 너비를 유사 동적으로 만들려면 width: 100%;및 (ie)를 사용하십시오 max-width: 500px;.

— WoodrowShigeru

1

예 width: 100%, edge 및 IE9-11에서 작동 하도록 추가해야합니다 .

— Huelfe

1

왼쪽, 오른쪽 및 (최대) 너비를 가운데로 설정하면되며 수평 정렬을 위해 아래쪽 또는 위쪽이 필요하지 않습니다. 모범 사례를 위해 브라우저가 오해 할 수 없도록 적어도 하나는 설정해야하지만

— Empi

67

나는 한 절대적 위치 요소의 중심이 트릭을 사용 . 하지만 요소의 너비를 알아야합니다.

.divtagABS {
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
  }

기본적으로 left : 50 %를 사용한 다음 음의 여백을 사용하여 너비의 절반을 되돌립니다.

— Chipcullen
소스

네, 이것은 요소의 너비가 고정 된 경우 사용해야하는 것입니다.

— Bantros 2012

훌륭한. 이 주셔서 감사합니다

— treeface

margin-left : -25 %를 사용할 수 있습니다. 숫자를 하드 코딩하는 대신 중앙에 배치합니다.

— Aaron Harun 2013 년

4

@AaronHarun-슬프게도, 예상대로 작동하지 않습니다. 25 %는 부모의 너비를 기준으로합니다. 나는 그것을 테스트하기 위해 코드 펜을 설정했다 : codepen.io/chippper/pen/xwKIl- 내가 의미하는 바를보기 위해 CSS의 마지막 줄을 토글 할 수있다.

— chipcullen 2010 년

이것은 나를 비슷한 속임수로 만들었지 만 margin-left: -50%;. 이상하게도 그것은 나에게 매우 이상한 정렬 문제를 해결했습니다!

— cregox

38

절대 요소에 너비가 있으면 아래 코드를 사용할 수 있습니다.

.divtagABS{
    width:300px;
    positon:absolute;
    left:0;
    right:0;
    margin:0 auto;
}

— 길버트 선
소스

훌륭한 ! 그런데 왼쪽과 오른쪽이 설정되어 있지 않으면 왜 작동하지 않습니까?

— geoffroy

1

아주 좋은 솔루션입니다. 폭과 같은 방법 : 100 % 부트 스트랩 아래)

— 안드레이 Hardau

수직 및 수평 중앙에 배치하려면 이것을 맨 위로 확장하십시오. 0; 하단 : 0; 이것을 너비와 높이에 대한 CSS 3 전환과 결합하면 꽤 좋은 효과를 얻을 수 있습니다

— Daniel Worthington-Bodart

나는 이것이 수평 및 수직 센터링 모두에 (선언 및 )을 사용 하는 Absolute Centering 기술 (또는 Smashing Magazine ) 의 수평 사례라고 생각합니다 . 링크 된 문서는이 방법이 어떻게 작동하는지 설명하고 다른 센터링 방법과 비교합니다. margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;widthheight

— DynamicDispatch 2011

@geoffroy 때문에 left, right, top,과 bottom에 잘 살고 있습니다 auto기본적으로 이것은 함께 절대 레이아웃, 실제로 방지 margin: auto에 띄는로

— asdru

17

아래 JSFiddle 작업. 절대 위치를 사용할 때 margin: 0 auto작동하지 않지만 다음과 같이 할 수 있습니다 (크기도 조정됩니다).

left: 50%;
transform: translateX(-50%);

업데이트 : 작업 JSFiddle

— 구운 흡입
소스

3

그것의 아주 좋은 CSS를 해킹

— 디 네쉬 파트라

절대 위치 div에서 가장 잘 작동하지만 div의 너비가 부모 너비보다 클 때 IE10에서 몇 가지 문제가 있습니다 ... :(

— iTux

1

나는 이미 이와 같은 문제가 있었고 컨테이너 (.divtagABS-container, 귀하의 경우)를 절대적으로 배치 한 다음 상대적으로 그 안에 콘텐츠를 배치하는 솔루션 (귀하의 경우 .divtagABS)을 얻었습니다.

끝난! 이제 .divtagABS에 대한 margin-left 및 margin-right AUTO가 작동합니다.

— 라파엘 카 마르고
소스

1

모든 답변은 제안 된 솔루션 또는 해결 방법 일뿐입니다. 그러나 여전히 질문에 대한 답을 얻지 못했습니다. margin : auto는 position : relative에서는 작동하지만 position : absolute에서는 작동하지 않습니다.

다음 설명이 도움이되었습니다.

"절대 위치 요소에서는 여백이 거의 의미가 없습니다. 이러한 요소는 정상적인 흐름에서 제거되므로 페이지의 다른 요소를 밀어 낼 수 없습니다 . 이와 같은 여백을 사용하면 여백이 적용되는 요소의 배치에만 영향을 줄 수 있습니다. 다른 요소가 아닙니다. " http://www.justskins.com/forums/css-margins-and-absolute-82168.html

— Alex Vovchuk
소스

-1

요소가 절대 위치이면 상대적이 아니거나 페이지 자체를 포함하여 모든 개체를 참조하지 않습니다. 그래서 margin: auto;중간이 어디에 있는지 결정할 수 없습니다.

명시 적으로 알려지기를 기다리고, 사용 left하고 top위치를 지정합니다.

javascript 또는 일부를 사용하여 프로그래밍 방식으로 중앙에 계속 배치 할 수 있습니다.

— Codecraft
소스

-4

배치 된 분할 스타일을 정의 할 때 absolute여백을 지정 하는 스타일 은 쓸모가 없습니다. 더 이상 일반 DOM 트리 안에 있지 않기 때문입니다.

float를 사용하여 트릭을 수행 할 수 있습니다.

.divtagABS {
    float: left;
    margin-left: auto;  
    margin-right:auto;
 }

— Starx
소스