Question

如何将文本垂直居中于带有图像标记的横幅容器中间？

我的搜索结果是使用display：table / display：table-cell或display：inline-block但是当我们有图片标记时，这些解决方案不起作用。我认为我必须对文本保持绝对位置，但是在重新调整窗口大小时如何确保它始终垂直和水平居中？

这是html：

<div class="banner">
  <img class="" src="http://placehold.it/1440x410">
  <div class="container">
    <div class="banner-text">
      <h1>Header Text</h1>
      <h3>Sub Header Text</h3>
      <a href="#"> CTA</a>
    </div>
  </div>
</div>

和Css如下：

.banner{
  width: 100%;
  position: relative;
}

.banner img{
    width: 100%;
}

.container{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.banner-text{
  position: absolute;
  top: 50%;
  left: 50%;
}

http://codepen.io/neginbasiri/pen/grEmMx

我想知道你的解决方案是什么？

由于

Answer 1

只需将此转换添加到此处列出的类：

.banner-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); /* or of course - translate(-50%, -50%); */
}

<强> Fork Demo

查看本指南了解详情： Centering in CSS

Answer 2

执行所需操作的最简洁方法如下：

.banner-text {
  position: absolute;
  top: 50%;  
  left: 50%;
  transform: translate(-50%, -50%); /* add me */
}

图像顶部的垂直居中文字

2 个答案: