높이가 100vh인 배경 이미지의 중앙에 div를 배치합니다.

Question

상단에 고정 위치 탐색 표시줄이 있는 코스를 작업 중입니다. 배경의 높이는 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%;
}

Answer 1

제가 올바르게 이해했다면 콘텐츠는 기본적으로 가로 중앙에 배치된다는 말씀이시지만 div에서는 콘텐츠를 세로 중앙에 height: 100%해야 합니다.

Div는 블록 요소이며 기본적으로 다음을 의미합니다.

1. 화면 전체 너비를 차지합니다
2. 콘텐츠를 표시하는 데 필요한 높이만 차지합니다(기본 높이는 auto).

div가 콘텐츠 중심 Flexbox인 경우 콘텐츠가 수직으로 중앙에 있더라도 div는 그 안의 가장 높은 요소에 맞게 필요한 만큼만 아래쪽으로 확장됩니다. div는 여전히 화면 상단에 있기 때문에 해당 내용이 div 내에서 수직 중앙에 위치하더라도 내용은 화면 상단에 표시됩니다. 화면 상단에 있습니다.

그러나 div의 height: auto 默认属性可以被覆盖。如果将高度设置为 100%는 div가 상위 요소(페이지) 높이의 100%가 되도록 강제합니다. 그런 다음 div는 콘텐츠에 추가 공간을 제공하고 Flex 규칙 덕분에 해당 추가 공간의 수직 중앙에 콘텐츠를 배치합니다.

이를 더 자세히 이해하려면 border: 5px dashed black 添加到 div 中，以便您可以看到其大小和位置，然后使用不同的高度值，例如 unset、100%、50% 등을 추가해 보세요. 그것을 시도하고 시도하십시오!