调整大小时，文本在图像上垂直和水平居中

Question

我正在尝试让文字在图片上居中；但是，每当我调整它的大小时，文本不会保持垂直居中。

.hero-image {
  margin: 0 auto;
}

.hero-image img {
  width: 100%;
}

.hero-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

<div class="hero-image">
  <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg">
  <div class="hero-text">
    Here is the hero text
  </div>
</div>

情况如下：好好工作：

调整大小时垂直居中关闭：

Answer 1

您需要为定位child设置容器的边界。将 position: relative 添加到 .hero-image class。否则它将使用下一个亲戚 parent。

.hero-image {
  margin: 0 auto;
  position: relative;
}

.hero-image img {
  width: 100%;
}

.hero-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: red;
}

<div class="hero-image">
  <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg">
  <div class="hero-text">
    Here is the hero text
  </div>
</div>

Answer 2

您的 css 英雄文字看起来不错 – 如果我正确理解您的问题，我认为图像应该修改为使用 100 视口宽度/高度而不是 100%。

body {
  margin: 0;
}

.hero-image img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.hero-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

Answer 3

您可以试试这个免翻译解决方案：

.hero-text {
    position: absolute;
    top: 33vw;
    text-align: center;
    width: 100%;
}

如果您打算在整个宽度上保持图片拉伸。

Answer 4

你可以用“display: flex”来实现。

.hero-image {
    background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh;
    display: flex;
  justify-content: center;
  align-items: center;
  }
  
  .hero-image img {
    width: 100%;
  }
  
  .hero-text {
  }

调整大小时，文本在图像上垂直和水平居中

Center text vertically and horizontally over image when resized

html

css

css-position

vertical-alignment

centering