如何使用CSS在div中优化定位文本及内容？

你的核心问题是Hero区域的标题和副标题没有垂直居中到背景图的合适位置，同时缺少合理的元素间距。用Flexbox是最简洁高效的实现方式，以下是修改后的代码：

修改后的CSS代码 #

/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557
*/

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

#mainheader {
  background-image: url(images/nhv.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: auto;
  height: 343px;
  color: white;
  /* 用Flex实现垂直水平居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 控制标题和副标题的间距 */
  gap: 12px;
}

h1 {
  font-size: 32px;
  margin: 0;
  background: #1d3557;
  padding: 5px 20px;
  border-radius: 5px;
}

h2 {
  font-size: 18.72px;
  margin: 0;
  background: #457b9d;
  padding: 5px 4px;
  border-radius: 5px;
  /* 让副标题宽度自适应内容，避免过宽 */
  max-width: 70%;
}

img {
  width: 100px;
}

关键修改说明 #

• 给#mainheader添加Flex布局属性，直接实现内部元素的垂直+水平居中，替代依赖body全局居中的方式，更精准可控。
• 用gap属性控制h1和h2之间的间距，比用margin更简洁直观。
• 给h2添加max-width，避免文本过长时撑满屏幕，更贴合设计的视觉效果。

HTML部分无需修改，保持原有结构即可。

内容的提问来源于stack exchange，提问作者Nikolai Kodehode