CSS Relative与absolute定位下响应式标题和按钮居中适配问题

修复方案 #

你出现错位的核心原因是用了固定偏移量的绝对/相对定位，没有用流式布局适配不同屏幕尺寸，按以下步骤修改即可实现响应式居中：

第一步：修改HTML结构

把标题和按钮包裹到同一个父容器中，替换导航栏下方原来的标题、按钮代码：

<div class="hero_container">
  <h1>Kipplo.co.uk</h1>
  <button class="main__btn"><a href="#">More Information</a></button>
</div>

第二步：清理无效样式

1. 删除<head>内嵌<style>标签里所有h1的样式规则
2. 删除.main__btn规则下的以下属性：

bottom: -400px;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
margin-bottom: 400px;

第三步：新增响应式居中样式

在样式表中添加以下规则：

.hero_container {
  /* 高度自动占满通知栏、导航栏之外的剩余视口空间 */
  min-height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
  /* 垂直水平双居中 */
  justify-content: center;
  align-items: center;
  /* 控制标题和按钮的间距 */
  gap: 2rem;
  background-color: #0a0a0a;
}

.hero_container h1 {
  /* 响应式字体，大屏最大60px，小屏自动缩小不会溢出 */
  font-size: clamp(2rem, 8vw, 60px);
  margin: 0;
  font-family: 'Courier New', Courier, monospace;
  color: blue;
}

修改完成后标题和按钮会始终在页面剩余空间居中，适配所有屏幕尺寸，不会和导航栏重叠。

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