div의 가로 가운데 위치 지정 구현

Question

div를 화면 중앙에 배치하고 싶습니다. 문제는 div가 작을 때는 왼쪽에서 45%가 괜찮아 보이지만 div가 길면(즉 너비가 더 넓은 경우) 왼쪽에서 30%로 변경해야 한다는 것입니다.

div를 크기에 따라 중앙에 배치하는 현명한 방법이 있습니까?

본체 {
배경:파란색;
}

.상자 {
위치: 절대;
상단:10px;
왼쪽:30%;
배경:흰색;
패딩:10px;
테두리 반경:10px;
}

이것은 긴 div이므로 left = 30%가 필요합니다.

Answer 1

다음 방법으로 가로 중앙에 배치할 수 있습니다.

으아악

Answer 2

display: flex;속성을 사용하여 구성 요소를 중앙 정렬할 수 있습니다.

css 플렉스

으아악 으아악