上面这张图是一个APP的界面。我正在学习HTML和CSS。我想请问，如何在HTML中实现上面这样图片的排版。
【我不是伸手党】：
我百度了一下，尝试了两种方法，但是感觉不太好，问题在于百度给我的答案对于各个浏览器并不普遍适用，也有的方法是div层太多，我觉得语义化不太好。
【我希望得到的解答是】

很有经验的前端工程师会选择用什么样的方法实现这样的效果？

在此谢过了！

---

补充一个demo:https://jsfiddle.net/dwqs/Lv1ea5fz/1/

相对定位和绝对定位都可以实现

---

单行文字比较简单，多行文字确实是要嵌套div的，外层display:table，内层display:teble-cell,text-align:center;vertical-align:middle，然后图片放背景里面就行了

---

最爱用flex来实现各种布局效果，代码简单。演示效果：https://jsfiddle.net/k4d3ch91/
felx的最好的教程文章https://css-tricks.com/snippets/css/a-guide-to-flexbox/
HTML代码：

<div class="posts-list">
  <div class="posts-list__post" style="background-color: red;">
    <h3 class="posts-list__post__title">颜控党，请进</h3>
    <div class="posts-list__post__meta">9919</div>
  </div>
  <div class="posts-list__post" style="background-color: blue;">
    <h3 class="posts-list__post__title">我说下雨，你说yo</h3>
    <div class="posts-list__post__meta">4332</div>
  </div>
</div>

css代码:

.posts-list__post {
  width: 100%;
  height: 200px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.posts-list__post__title {
  margin: 0;
  padding: 0;
  color: #fff;
}
.posts-list__post__meta {
  margin: 0;
  padding: 0;
  color: #fff;
}

---

找到实现这个效果的网站，直接使用浏览器开发者工具，看看网页代码。

---

我没有经验，嘿嘿，但是我一般用背景图的方式

---

    <style type="css/text">
    /*如果支持CSS3的话,不支持的话就用js计算left和top的值*/
    .vcenter {position:absolute;left:50%;top:50%;translateX(-50%);translateY(-50%)}
    </style>
    <div>
        <img src='xx' />
        <div class="vcenter">center</div>
    </div>

---

如果在移动端，有flex