상단에 고정 위치 탐색 표시줄이 있는 코스를 작업 중입니다. 배경의 높이는 100vh로 설정되고 텍스트 내용이 있는 div는 배경 중앙에 있습니다. Flexbox를 사용하면 거의 중앙에 배치되지만 실제로 배경 중앙에 배치하려면 div의 높이를 높이의 100%로 설정해야 합니다. Flexbox와 뷰포트 높이에 대해 알고 있지만 다이빙의 중심을 정하기 위해 div의 높이를 100%로 설정해야 하는 이유가 무엇인지 혼란스럽습니다. 제가 요구하는 것을 복제하기 위해 여기에 배경으로 어떤 이미지든 넣을 수 있다고 생각합니다. 내가 여기서 이해하고 있기를 바랍니다.

으아악 으아악

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background: #fff;
  color: #333;
  line-height: 1.5;
}

ul {
  list-style: none;
}

a {
  color: #333;
  text-decoration: none;
}

h1,
h2 {
  font-weight: 300px;
  line-height: 1.5:
}

p {
  margin: 10px 0;
}

img {
  width: 100%;
  /*makes image width of the container */
}


/* navbar */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #333;
  color: #fff;
  width: 100%;
  height: 70px;
  /* apparently a common height for navbar */
  position: fixed;
  top: 0px;
  padding: 0 30px;
}

.navbar a {
  color: #fff;
  padding: 10px 20px;
  margin: 0 5px;
}

.navbar a:hover {
  border-bottom: 1px solid #28a745;
}

.navbar ul {
  display: flex;
}


/* Header */

.hero {
  background: url("/img/home/showcase.jpg") no-repeat center center/cover;
  height: 100vh;
  position: relative;
  color: #fff;
}

.hero .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}