如何让H1文本居中显示在网页图片上方？

你的问题出在绝对定位的<h1>元素没有正确设置宽度或定位偏移，导致text-align: center无法生效。以下两种方法可以快速解决：

方法1：设置H1宽度为100% #

给.welcome-page h1添加width: 100%，让它的宽度和父容器（图片容器）一致，此时text-align: center就能让文本在整个图片宽度内居中：

.welcome-page h1 {
  position: absolute;
  color: black;
  text-align: center;
  top: 20%;
  width: 100%; /* 新增这一行 */
}

方法2：使用平移实现精准居中 #

通过left: 50%将元素左边缘移到容器中点，再用transform: translateX(-50%)把元素自身向左平移一半宽度，这种方法不需要设置宽度，适配任意长度的文本：

.welcome-page h1 {
  position: absolute;
  color: black;
  top: 20%;
  left: 50%; /* 新增 */
  transform: translateX(-50%); /* 新增 */
}

修改后的完整CSS示例（以方法1为例） #

* {
  margin: 0;
  padding: 0;
}

/*------------------------------HEADER--------------------*/
.header {
  background-color: #00843D;
  height: 125px;
  position: relative;
}

.logo img {
  height: 200px;
  width: 200px;
  position: relative;
  z-index: 1;
}

.logo {
  position: absolute;
  left: 5%;
  top: 15%;
}

.nav-links {
  text-align: right;
}

.nav-links ul {
  color: white;
  padding: 25px;
}

.nav-links ul li {
  display: inline-block;
  font-size: 35px;
  padding: 20px;
}

/*--------------------------WELCOME PAGE----------------*/
.welcome-page {
  position: relative;
}

.welcome-page img {
  width: 100%;
  height: 100%;
  position: relative;
}

.welcome-page h1 {
  position: absolute;
  color: black;
  text-align: center;
  top: 20%;
  width: 100%;
}

补充说明 #

• 父容器.welcome-page已设置position: relative，这是绝对定位元素能相对于它定位的前提，你的代码这部分是正确的。
• 如果需要同时实现垂直居中，可将top: 20%改为top: 50%，再添加transform: translateY(-50%)（方法2中可合并写为transform: translate(-50%, -50%)）。

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