Html CSS文本对齐和格式问题

我想在一个框中垂直居中放置两行文本，但我有两个问题：

减少主

（JOHN DOE）和
（出生于日本）之间的空白的“最干净”的方法是什么。我可以使用
行的填充/边距，但我认为这不是最好的方法。是吗

无论绿色框的高度如何，将这两行文本垂直居中的最佳方法是什么

谢谢

---

Flexbox用于居中…然后使用

行高

和边距/填充重置

我为视觉参考添加了边框……我还从

p

中去掉了

span

，因为它是不必要的

.apple{
背景#6FB34F；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.介绍框{
高度：140像素；
边缘底部：30px；
}
.介绍框{
字体大小：36px；
边框：1px纯灰；
颜色：#fff；
文本对齐：居中；
文本转换：大写；
保证金：0；
填充：0；
线高：1；
}
.介绍框{
字号：18px；
边框：1px纯灰；
文本转换：小写；
颜色：白色；
}

无名氏

出生于日本

<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>

.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;

}