“여백 : 0 자동;”에 정확히 필요한 것은 일하다?

margin: 0 auto;요소의 설정 이 중심을 잡는 데 사용 된다는 것을 알고 있습니다 (왼쪽-오른쪽). 그러나 요소와 그 부모가 자동 마진이 작동하기위한 특정 기준을 충족해야한다는 것을 알고 있으며 마법을 올바르게 얻을 수는 없습니다.

내 질문은 간단합니다. margin: 0 auto;자식을 왼쪽 중앙 에 배치하려면 요소와 부모에 어떤 CSS 속성을 설정해야 합니까?

내 머리 꼭대기에서 :

1. 요소는 블록 수준이어야합니다 (예 : display: block또는display: table
2. 요소는 부유하지 않아야합니다
3. 요소는 고정 또는 절대 위치를 가져서는 안됩니다 ¹

다른 사람들의 머리 꼭대기에서 :

4. 요소는 ²width 가 아니 어야합니다.auto

주의 모든 작동하는 이러한 조건은 요소의 충족해야이 중심되고.

⁽¹⁾ _{이 한 가지 예외가있다 : 당신의 고정 또는 절대 위치 요소가있는 경우 left: 0; right: 0, 그 것이다 자동 여백의 중심 .}

² _{기술적 margin: 0 auto으로는 자동 너비로 작업하지만 자동 너비가 자동 여백보다 우선하며 자동 여백은 제로화되어 "작동하지 않는"것처럼 보입니다.}

내 머리 꼭대기에서 width. 가운데에 놓을 컨테이너의 너비를 지정해야합니다 (부모 너비가 아님).

CSS에 대한 완전한 규칙 :

1. ( display: blockAND width하지 자동) 또는display: table
2. float: none
3. position: relative

요소가 블록 요소가 아닌 경우 머리 꼭대기에서 벗어납니다.

그런 다음 너비를 지정하십시오.

display : table에서도 작동합니다.이 경우 너비를 설정할 필요가 없으므로 유용한 표시 속성입니다. (이 게시물은 5 세라는 것을 알고 있지만 여전히 지나가는 사람과 관련이 있습니다.)

내 고양이 머리 꼭대기에서 가운데를 향하도록 div하려는 것이로 설정되어 있지 않은지 확인하십시오 width: 100%.

그렇다면 하위 div에 설정된 규칙이 중요합니다.

jsFiddle을 만든이 빠른 예제로 이동하십시오 . 잘 이해하기 쉽습니다. wrapper사이트 너비와 함께 div를 사용 하여 가운데 정렬 할 수 있습니다. 당신이 넣어야하는 이유 width는 브라우저가 당신이 유동적 인 레이아웃을하지 않을 것이라는 것을 알기 때문입니다.

내 제안은 다음과 같습니다.

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;

<button>요소를 작동시키기 위해 너비를 지정할 필요가 없다는 것이 흥미로울 것입니다 display:block. http://jsfiddle.net/muhuyttr/

지금이 질문을 타격, 그리고 수정 할 수있는 사람을 위해 margin: 0 auto, 여기의 일이 당신이 유용하게 사용할 수있는 발견하십시오 table요소 를 지정하지 폭이 되어 있어야 display: table하고 있지 display: block 위해서는 margin: auto작업을 수행하는. 이것은의 조합으로, 일부 자명 할 수 display: block및 기본 width컨테이너를 채우기 위해 확장 테이블을 줄 것이다 가치, 그러나 당신이 경우 원하는 테이블은 폭 "자연"이다 걸릴 및 중앙에, 당신이 필요로하는display: table