如何让文本对齐Div顶部并保持响应式布局？

直接给你调整后的代码，同时说明关键修改点：

完整CSS代码 #

/* 重置浏览器默认边距，避免外边距折叠和默认间距干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container-flex {
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto; /* 让容器水平居中，可选 */
}

/* 固定header到页面顶端 */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff; /* 添加背景色，避免遮挡下方内容 */
  padding: 1rem; /* 内边距让文本不贴边 */
}

/* 让h1、h2居中显示 */
h1, h2 {
  text-align: center;
  margin: 1rem 0; /* 设置合适的上下间距，替代默认边距 */
}

/* 给main添加上内边距，避免被固定的header遮挡 */
main.steak-background {
  padding-top: 6rem; /* 值根据header高度调整 */
}

完整HTML代码 #

<div class='container container-flex'>
  <main class='steak-background'>
    <header>Mouthwateringly Delicious</header>
    <h1>Learn how to make <span>the best BBQ ribs</span> in town</h1>
    <h2>Join us for this live webinar</h2>
  </main>
</div>

关键修改说明 #

• 重置默认样式：用*选择器清除所有元素的默认margin和padding，同时设置box-sizing: border-box，避免内边距/边框影响元素宽度，从根源减少外边距折叠的可能。
• 固定Header：通过position: fixed把header钉在页面顶端，配合top:0、left:0和width:100%实现全屏宽度，添加背景色防止遮挡下方内容。
• 避免内容被遮挡：给main设置padding-top，值要大于等于header的高度，确保页面文本从header下方开始显示。
• 居中标题：直接给h1和h2设置text-align: center，简单高效。
• 控制间距：手动给h1、h2设置margin，替代浏览器默认的大边距，避免和其他元素产生意外的外边距折叠。

内容的提问来源于stack exchange，提问作者Thomas Ventura