CSS text alignment and formatting issues - html

Question

I'd like to center vertically 2 lines of text in a box, but I have 2 questions:
What is the "cleanest" way to reduce the empty space between the main <p> (JOHN DOE) and the <p><span> (born in Japan). I can play with the padding/margin of the <span> line but I don't believe this would be the best approach. Is it?
What is the best way to center these 2 lines of text vertically no matter what the height of the green box is?
Thanks,
https://jsfiddle.net/qa6yzbk7/
<div class="container">
<div class="row">
<div class="col-md-4 intro-boxes white-smoke">
<p>Colum 1</p>
</div>
<div class="col-md-4 intro-boxes apple">
<p>John Doe</p>
<p><span>Born in Japan</span></p>
</div>
<div class="col-md-4 intro-boxes chateau-green">
<p>Jane Doe</p>
<p><span>Born in France</span></p>
</div>
</div>
</div>
CSS:
.chateau-green {
background: #469551;
}
.apple {
background: #6FB34F;
}
.white-smoke {
background: #F5F5F5;
}
.red {
background: red;
}
.green {
background: green;
}
.height-350px {
height: 350px;
background-image: url(http://placehold.it/1350x450/E1E9EC);
background-position: center center;
}
.intro-boxes {
height: 140px;
margin-bottom: 30px;
}
.intro-boxes p {
font-size: 36px;
color: #fff;
text-align: center;
text-transform: uppercase;
}
.intro-boxes p span {
font-size: 18px;
color: #fff;
text-align: center;
text-transform: lowercase;
}

Answer 1

Flexbox for centering....then using line-height and margin/padding resets.
I added borders for visual reference....I also took the span out of the p as it was unnecessary.
.apple {
background: #6FB34F;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.intro-boxes {
height: 140px;
margin-bottom: 30px;
}
.intro-boxes p {
font-size: 36px;
border: 1px solid grey;
color: #fff;
text-align: center;
text-transform: uppercase;
margin: 0;
padding: 0;
line-height: 1;
}
.intro-boxes span {
font-size: 18px;
border: 1px solid grey;
text-transform: lowercase;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4 intro-boxes apple">
<p>John Doe</p>
<span>Born in Japan</span>
</div>
</div>
</div>