javascript - margin:auto를 위, 아래, 왼쪽, 오른쪽으로 자동 정렬할 수 없는 이유는 무엇입니까?

Question

HTML에는 하나의 div만 있습니다. {코드...} css1은 div.test를 왼쪽과 오른쪽 중앙에 배치할 수 있습니다. CSS2: {코드...}

大家讲道理 · Answer

다른 속성의 사용된 값에는 다음 제약 조건이 적용되어야 합니다.

'왼쪽 여백' + '테두리 왼쪽 너비' + '왼쪽 패딩' + '너비' + '오른쪽 패딩' + '테두리 오른쪽 너비' + '마진 오른쪽' = 포함 블록의 너비

'margin-left'와 'margin-right'가 모두 'auto'인 경우 사용되는 값은 동일합니다. 이는 포함 블록의 가장자리를 기준으로 요소를 수평 중앙에 배치합니다.

하면是关于고도:

'margin-top' 또는 'margin-bottom'이 'auto'인 경우 사용된 값은 0입니다. 'height'가 'auto'인 경우 높이는 요소에 블록 수준 하위 요소가 있는지 여부와 여부에 따라 달라집니다. 패딩이나 테두리가 있습니다:

ㅋㅋㅋ

阿神 · Answer

좋은 질문입니다. 두 개의 요소가 연속으로 있을 때 왼쪽과 오른쪽의 중앙에 배치할 수 있나요? 마찬가지로 위와 아래에 요소가 있을 수 있는 경우 해당 요소가 존재해야 하는 위치를 브라우저가 어떻게 계산하기를 원하시나요?

某草草 · Answer

아니요, 위쪽과 아래쪽 정렬에 플렉스 레이아웃을 사용하지 않으면 좋은 방법이 없습니다. Virtical–align도 사용하기 쉽지 않습니다!

PHP中文网 · Answer

아니요. 상하좌우를 중앙에 배치하고 싶다면 flex 레이아웃을 사용하고 그다음 table, table-cell 또는 positioning을 사용하는 것을 권장합니다