"margin:0 auto;"가 작동하려면 정확히 무엇이 필요합니까?

"margin:0 auto;"가 작동하려면 정확히 무엇이 필요합니까?

나는 그 설정을 알고 있습니다.margin: 0 auto;요소의 중심을 맞추는 데 사용됩니다(좌우).하지만 저는 자동 마진이 작동하려면 요소와 요소의 부모가 일정 기준을 충족해야 한다는 것을 알고 있으며 결코 마법을 제대로 맞출 수 없을 것 같습니다.

그래서 제 질문은 간단합니다. 요소와 그 부모에 어떤 CSS 속성을 설정해야 하는지에 대한 것입니다.margin: 0 auto;아이의 중심을 좌우로 잡아요?

내 머리속에서.

1. 요소는 블록 레벨이어야 합니다.display: block아니면display: table
2. 요소가 뜨면 안 됩니다.
3. 요소의 위치가 고정되거나¹ 절대적이어서는 안 됩니다.

다른 사람들의 머리 위에서:

4. 요소에는 다음이 있어야 합니다.width그렇지 않습니다auto²

이 모든 조건은 요소가 중심을 잡고 있어야 작동합니다.

---

¹ _{여기에는 한 가지 예외가 있습니다. 고정 요소 또는 절대 위치 요소가 다음을 포함하는 경우left: 0; right: 0, 중앙에 자동 여백이 배치됩니다.}

² _{엄밀히 말하면.margin: 0 auto는 자동 너비로 작동하지만 자동 너비가 자동 여백보다 우선되며 결과적으로 자동 여백이 0으로 표시되어 "작동하지 않는" 것처럼 보입니다.}

내 머리속에서, 그것은 필요합니다.width. 중심을 잡을 컨테이너의 너비(부모 너비가 아닌)를 지정해야 합니다.

CSS에 대한 전체 규칙:

1. (display: block그리고.width자동 아님) 또는display: table
2. float: none
3. position: relative오어position: static

오어

1. 부모 요소가 있는display: flex

내 고양이 머리 위에서, 확실하게,div중심을 잡으려고 하는 것이width: 100%.

그렇다면, 어린이 디브들에게 정해진 규칙이 중요합니다.

내 머리 위에서, 만약 그 요소가 블록 요소가 아니라면 - 그렇게 하세요.

폭을 줄 겁니다

또한 display:table - 너비를 설정할 필요가 없기 때문에 이 경우 유용한 디스플레이 속성입니다. (이 게시물이 5년 된 것으로 알고 있지만 여전히 행인들과 관련이 있습니다;)

다음은 저의 제안입니다.

First: 
      1. Add display: block or table
      2. Add position: relative
      3. Add width:(percentage also works fine)
Second: 
      if above trick not works then you have to add float:none;

제가 jsFiddle을 만든 간단한 예로 가주세요.이해하기 쉽기를 바랍니다.당신은 a를 사용할 수 있습니다.wrapper가운데 정렬할 부위의 너비를 나타내는 div.당신이 넣어야하는 이유는width그것은 브라우저가 당신이 액체 레이아웃을 선택하지 않는다는 것을 알 수 있도록 하기 위한 것입니다.

가로 너비를 지정할 필요가 없다는 점이 흥미로울 수 있습니다.<button>그것을 작동시키기 위한 요소 - 단지 그것이 그것을 가지고 있는지 확인합니다.display:block: http://jsfiddle.net/muhuyttr/

부모 요소에 대해 고정된 너비가 없는 경우, 부모 요소에 대해display: flex나를 위해 일했습니다.

이 문제를 해결할 수 없는 사람들을 위해서라면margin: 0 auto, 당신이 유용하게 생각할 수 있는 것을 발견했습니다. a.table너비가 지정되지 않은 요소는 다음을 포함해야 합니다.display: table아닌 display: block하기 위해서margin: auto일을 하기 위해서 입니다.이것은 일부 사람들에게 명백할 수도 있습니다.display: block기본값과widthvalue는 컨테이너를 채우기 위해 확장되는 테이블을 제공하지만 테이블이 "자연적인" 너비를 가져가고 중심을 잡으려면 다음이 필요합니다.display: table

언급URL : https://stackoverflow.com/questions/4955122/what-exactly-is-needed-for-margin-0-auto-to-work