用css定位元素

Question

我有三个div，其中有两个元素，一个是图像，另一个是另一个div内的h3标签。 我创建了一个用于将h3标签定位到图像中心的类。然而，当我将类应用于这些div时，h3位于中心但不是第一个div的情况下，它更像是在图像上方。

以下是代码段：

/* the class for positioning */

.tagline {
  font-size: 50px;
  font-family: 'Arvo', serif;
  text-align: center;
  color: #fdfdfd;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
}


/* CSS for the divs */

.mobile-category-wrapper {
  width: 100%;
  position: relative;
  img {
    width: 100%;
  }
}

<div class="mobile-category-wrapper">
  <img src="img/places.jpg" alt="">
  <div class="tagline">
    <h3>Places</h3>
  </div>
</div>

<div class="mobile-category-wrapper">
  <img src="img/people.jpg" alt="">
  <div class="tagline">
    <h3>People</h3>
  </div>
</div>

<div class="mobile-category-wrapper">
  <img src="img/events.jpg" alt="">
  <div class="tagline">
    <h3>Events</h3>
  </div>
</div>

以下是我想要实现的内容及其第二个div。

这是h3升级的第一个div。

非常感谢帮助。提前谢谢！

Answer 1

看来你的div有无效的CSS - 如果这是sass，你可以预编译;但是，普通的CSS不应该嵌套选择器

div的CSS：

.mobile-category-wrapper {
    width: 100%;
    position: relative;
    img {
        width: 100%;
    }
}

应该是两条规则

.mobile-category-wrapper {
    width: 100%;
    position: relative;
}
.mobile-category-wrapper img {
        width: 100%;
}

对于剩余的翻译问题，我建议明确添加一个来源，看看是否可以解决问题：

-ms-transform-origin: 50% 50%; /* IE 9 */
-webkit-transform-origin: 50% 50%; /* Safari 3-8 */
transform-origin: 50% 50%;