
중앙정렬 방법 문의
height 기준으로 중앙 정렬이 안되는데 어디 코드가 문제일까요..?
원하는 화면도 첨부했습니당!


<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title><style>
.mytitle {
background-color : green;
width: 100%;
height: 250px;
background-image : url(https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg);
background-position : center;
background-size : cover;
color : white;
display: flex;
flex-direction: column;
justify-content center;
align-items: center;
}
</style>
</head>
<body>
<div class="mytitle"><h1>내 생애 최고의 영화들</h1><button>영화기록하기</button>
</div>
</body>
</html>
