Css 将文本垂直居中放置在div中

我试图在

div

中显示文本“我是来自英国伦敦的iOS工程师和Web开发人员”，id为“伦敦”。然而，我正在努力找到一个好办法来做到这一点。水平对齐很容易，因为我只需设置'london'

div

的

text align

属性。但是，当尝试垂直对齐时，我无法设置

宽度

和

高度

属性，这意味着我无法使用

边距：0自动

垂直对齐文本，因为我正在使用

span

元素

你能告诉我完成这件事的最好方法吗

这里有一个我目前拥有的JS摘要：。

如果你的

#london

分区总是200px高，你可以将

高度：200px

更改为

行高：200px

，它将垂直居中于行中的文本

---

请参见此处：

这是一个居中对齐的版本（取自您的小提琴）：

---

您可以执行以下操作：

HTML:

我在这里改了你的小提琴：

---

请注意，使用CSS表格（IMHO）比更改行高、填充或边距等更好，因为它始终使内部跨距垂直居中，即使它缠绕到多行上也是如此。对于其他解决方案，如果内容大小发生变化，您必须调整行高、填充或边距的值。

实际上应该是

垂直对齐：中间
，而不是
垂直对齐：中间
）哦，谢谢！编辑以考虑到这一点。我把小提琴拉对了，算数吗？：）
<div id="london">
            <span class="light" style="display: inline-block; vertical-align: middle; line-height: 1.2;">I’m an 
                <span class="heavy">iOS Engineer &amp; Web Developer</span>
                <span class="light"> from London, UK</span>
            </span>
</div>

line-height: 200px;

<div class="outer">
    <span class="inner">This is vertically centered.</span>
</div>

.outer {
    display: table;
}
.inner {
    display: table-cell;
    vertical-align: middle;
}