위치 절대 값과 0에서의 네 방향 모두 내부 요소를 중심에 두는 방법은 무엇입니까?

Question

일부 코드를 검토 중이며 작동하는 동안 CSS가 내부 div를 중심으로 배치되는 방식을 이해하지 못합니다.

Codepen demo도 사용할 수 있습니다.

HTML

<div class='outer'> 
    <div class='inner'></div> 
</div> 

CSS

div { 
    border: 1px solid black; 
    box-sizing: border-box; 
} 

.outer { 
    position: absolute; 
    background-color: goldenrod; 
    width: 100%; 
    height: 100%; 
} 
.outer .inner { 
    width: 75%; 
    height: 75%; 
    background-color: green; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    margin: auto; 
} 

Answer 1

어떤 이유로 직장에서 동료 달콤한 그래서 여기에 이렇게 지적 그의 대답은하지 않습니다.

하면 높이없이 정상적인 사업부에

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

을 넣어하거나 컨테이너의 사업부 전체 크기를 만들 것 폭한다면. 해당 div에 height 및 을 넣으면 제약을 받게되며 컨테이너를 채우는 동안 설정 된 크기를 준수하게됩니다.

위에서 설명한대로 margin: auto;이 중요합니다. 이렇게하면이 div의 상자에 설정된 크기를 유지하면서 여백을 균등하게 확장하여 해당 컨테이너를 채울 수 있습니다.

센터를 배치하는 가장 좋은 방법입니까? 아무 생각도 없지만 작동합니다.

Answer 2

는

margin: auto; 

의 당신은 Box Model에서이의 더 나은 이해를 얻을 수 있습니다해서입니다.

Answer 3

여기에 대한 답변이 나와 있습니다.

margin: auto은 요소의 왼쪽과 오른쪽 사이에서 사용 가능한 공간을 균등하게 나눕니다. 사용 가능한 공간에 따라 부모 컨테이너의 왼쪽 및 오른쪽 가장자리 사이의 비어있는 모든 가로 간격

Reference