모달창 만들기 숙제하는 도중 질문 있습니다.

모달창 숙제 자체는 완성했는데요.

모달 창을 가로 세로 가운데 정렬하려고 

.black-bg 클래스의 div 태그에

display: flex;
justify-content: center;
align-items: center; 

속성들을 줬습니다.

그런데, 1번 위치에 넣으면, 해당 속성이 제대로 먹히지 않구요.

그래서 2번 위치에 넣어보면, display: none; 속성이 무효화됩니다.

왜 이런 문제가 발생하나요?? 그리고 어떻게 제대로 가로 세로 가운데 정렬 속성값을 줄 수 있을까요??

해당 질문 코드 링크

https://codepen.io/uscgil0127/pen/vYdWrQQ

------------

.black-bg {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.2);
z-index: 5;
padding: 30px;
/* 1번 위치 */
/* 여기에 넣으면, 가운데 정렬이 안 됨 */
/* display: flex;
justify-content: center;
align-items: center; */

display: none;

/* 2번 위치 */
/* 여기에 넣으면, display: none; 속성이 안 먹힘 */
/* display: flex;
justify-content: center;
align-items: center; */
}