调整大小时，HTML 部分应位于图像中间

Question

我已经尝试了我找到的所有示例。我有一个位于图像前面中间的 div。但是当屏幕调整大小时，div 不会保持原样。有人可以告诉我我做错了什么吗？我的代码如下所示:

我的 HTML:

  <section class="SliderOuter">
    <img src="images/cover.png" alt="">
    <div class="container" style="text-align:center;">
      <div class="tags1">
        <img src="images/ESCO_logo_big.png" alt="">
        <h3 style="color:#ffff">Leading company in the fiel of energy efficiency</h3>
        <br>
        <h4 style="color:#ffff">Be the first to know about ESCO updates and announcements:</h4>
        <form action="" method="post" role="form">
          <input class="form-control" type="text" id="" name="" placeholder="your@email.com">
          <br>
          <input type="submit" value="Subscribe" class="btn btn-large btn btn-danger" />
        </form>
      </div>
    </div>
  </section>

我的 CSS:

.tags1 {
    margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

求助!提前致谢!

Answer 1

如果我理解正确的话，你的问题不在于 .tags div 但与它的 parent .container和 .SliderOuter

.container 需要对其应用一些定位，以便它位于 .SliderOuter 内并位于第一个图像之上。

.Slider 又需要在其上设置定位，以便 .container 可以相对于它的高度。

你的 CSS 最终应该看起来像这样......

.SliderOuter {
    position: relative;
}

.container {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tags1 {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}

我在这里拼凑了一个 Fiddle http://jsfiddle.net/2owysubj/2/

对于 fiddle ，我冒昧地稍微整理了标记(您应该尽量避免使用内联样式和 <br> 用于样式目的，并且我使用了一些虚拟图像来演示，但总的原则就是全部那里。

另一件需要考虑的事情可能是用背景图片替换第一张图片，这样您就不需要 .container 了。绝对定位。

您也可以考虑使用 Flexbox用于居中元素，但对于您现在需要的东西，定位效果非常好。