Vertically center h2 and sub-heading - html

Question

I'm working on a website and wanted to see how I could vertically center h2 and the sub-heading with respect to the div that contains the image.
Basically, I have a container with display: flex and flex-direction: column. I have three columns.
The first column contains a profile image along with a header and sub-header. What's the best way to vertically center the .title div?
Here's a link to the jsfiddle

Answer 1

give display: flex to class profile-container, then you can align it's child profile image and title class to vertically center like below:
.profile-container{
display : flex;
align-items : center;
height : 200px; //provide wrapper height
}
This should achieve your requirement.

Answer 2

Try using absolute positioned, with a -50% transform.
#import url('https://fonts.googleapis.com/css?family=Lato');
html {
width: 100%;
height: 100%;
}
body {
background-color: #fafafa;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.container {
background: white;
width: 1000px;
height: 600px;
border: 1px solid rgba(0, 0, 0, .09);
box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
display: flex;
flex-direction: column;
}
/*set up vertical column layouts for the three containers*/
.profile-container,
.work-container,
.social-media-container {
flex: 1;
padding: 1.5rem;
}
.profile-container {
align-self: center;
position: relative;
width: 100%;
}
.profile-image {
display: inline-block;
background-image: url('https://organicthemes.com/demo/profile/files/2012/12/profile_img.png');
background-repeat: no-repeat;
background-position: 0px 0px;
background-size: 100%;
height: 200px;
width: 200px;
border-radius: 50%;
}
.title {
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
padding-left: 25px;
}
.header-name {
font-family: 'Lato', sans-serif;
display: inline-block;
margin: 0px;
}
<div class="container">
<div class="profile-container">
<div class="profile-image"></div>
<div class="title">
<h2>Tarang Hirani</h2>
<h6>Software Engineer</h6>
</div>
</div>
<div class="work-container">
These are my projects
</div>
<div class="social-media-container">
Social media link
</div>
</div>
Link for reference: https://jsfiddle.net/kzj4omo8/3/