html - 将标题标签与图像中心对齐

Question

我的HTML代码如下

  <div class="col-md-3 portfolio-item">
            <a href="#">
                <img class="img-responsive" src="images/starter.jpg" alt="starter">
                <h2> Starter</h2>
            </a>
  </div>

下面是我编写的 CSS，它工作正常。但我想知道将 h2 标签垂直和水平定位到图像中心的最佳方法是什么。或者这是这样做的方法吗？

  .portfolio-item h2 {
      left: 100px;
      position: absolute;
      top: 45px;
  }

  .portfolio-item img {
      position: relative;
  }

Answer 1

使用链接作为包含元素，然后相应地定位标题

* {
  font-family: Segoe UI;
  margin: 0;
  padding: 0;
}

.portfolio-item a {
  position:relative;
  display:inline-block;
}
.portfolio-item a h2 {
  position:absolute;
  text-align:center;
  top:50%;
  left:0;
  width:100%;
  transform:translateY(-50%);
  background:lightblue;
  }

<div class="col-md-3 portfolio-item">
  <a href="#">
    <img class="img-responsive" src="http://placehold.it/100x100" alt="starter" />
    <h2> Starter</h2>
  </a>
</div>