如何在移动端实现Coming Soon页面Hero图片居中？

云原生阿岚

2026-7-17

解决方案

问题核心在于background-position-y: 0px强制背景图片垂直固定在顶部，破坏了移动端的居中效果；同时缺少合适的背景缩放规则，导致图片适配性不足。以下是修复后的代码及说明：

修改后的完整代码

CSS部分

body {
  background-image: url("https://picsum.photos/1000/1000");
  background-repeat: no-repeat;
  background-color: black;
  background-position: center center; /* 明确设置水平+垂直居中 */
  background-size: cover; /* 按比例缩放图片，覆盖整个视口 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  min-height: 100%;
  margin: 0;
  padding: 0;
}
.overlay {
  box-shadow: inset 0 0px 0 1000px rgba(0, 0, 0, 0.6);
  padding: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;  
  justify-content: center;
  align-items: center;
}

.text {
  font-family: Arial, sans-serif;
  background-color: rgba(0, 0, 0, 0.0);
  color: #ffffff;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-left: 0; /* 移除左侧边距，确保文本完全居中 */
}

h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

p {
  font-size: 18px;
  margin-bottom: 20px;
}

HTML部分（无需修改）

<div class="overlay">
  <div class="text">
    <h1>Quintillion AI</h1>
    <h2>Coming soon</h2>
    <p>
      We are currently in stealth mode, building AI Assistants for the future of work.
      <br>Please check back soon for updates.
    </p>
  </div>
</div>