html - 垂直居中 h2 和副标题

Question

我在网站上工作，想看看如何将 h2 和副标题相对于包含图像的 div 垂直居中。

基本上，我有一个带有 display: flex 和 flex-direction: column 的容器。我有三列。

第一列包含个人资料图片以及标题和子标题。将 .title div 垂直居中的最佳方法是什么？

这是 jsfiddle 的链接

Answer 1

将 display: flex 赋给 profile-container 类，然后你可以将它的子配置文件图像和标题类垂直居中对齐，如下所示:

.profile-container{
 display : flex;
 align-items : center;
 height : 200px; //provide wrapper height
}

这应该可以满足您的要求。