Html 垂直/水平居中表格单元格中div中的数字

我需要垂直和水平居中一个数字，它包含在一个div或其他任何东西中-这个div的宽度和高度需要是60px，它需要是一个圆，它需要垂直和水平居中于一个表格单元格中

到目前为止，我所能想到的就是在表格单元格中居中放置div，但无论我怎么做，我都无法在该div中垂直居中放置文本

有人能帮忙吗

编辑 这就是我真正想要的：

<style>
.outer {
    border: 2px solid red;
    width: 100%;
    display: table;
    vertical-align: middle;
}
.cell1 {
    border: 2px solid red;
    width: 10%;
    display: table-cell;
    vertical-align: middle;
}
.cell2 {
    vertical-align: middle;
    font-size: 22px;
    border: 2px solid red;
    width: 90%;
    display: table-cell;
}
.number-box {
    display: table;
    border: 1px solid green;
    border-radius: 30px;
    width: 60px;
    height: 60px;
    vertical-align: middle;
    margin: 0 auto;
}
.number {
    font-size: 18px;
    line-height: 28px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
</style>

<div class="outer">
    <div class="cell1">
        <div class="number-box">
            <div class="number">1</div>
        </div>
    </div>
    <div class="cell2">
        xxxxas asd ad asd asd asd asd asda adsasd asd asd asdkajsd asd asda sd adasd asdasdasdasd ad asd asd asd asd asd asd as dad asd asdadasda sda dasdasdadasdad
    </div>
</div>

---

试试这个。我删除了你的一个元素。更换它可能不会有太多麻烦

.outer {
    border: 2px solid red;
    width: 200px;
    height: 200px;
}
.number-box {
    display: table;
    border: 1px solid green;
    border-radius: 30px;
    width: 60px;
    height: 60px;
    margin: 70px auto 0;
}
.number {
    font-size: 28px;
    line-height: 28px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

<div class="outer">
    <div class="number-box">
        <div class="number">1</div>
    </div>
</div>

---

这里需要注意的一点是，字体大小和行距必须匹配。

好友不允许好友使用内联样式：-谢谢你的改变。虽然内联样式在开发时很有用，但好的，下次我会重新格式化。不，不是。添加类和附近的嵌入样式标记。你以后会感谢你自己没有把那些垃圾搬走。您只需复制并粘贴到样式表。谢谢。这是一个可能的解决方案，但不是我想要的，因为你实际上把数字移到了中心。但是如果你改变字体大小，那么居中就不再正确了。理想情况下，我希望有一种使用垂直对齐：中间来自动居中数字的方法。谢谢-我更新了小提琴，以准确反映我想要的是将div置于表格单元格的中心。谢谢你的回答。事实上，很有趣，它是有效的，因为高度是在外部定义的。如果删除高度，则垂直居中不再有效。假设圆圈位于一个表格单元格内，该单元格右侧的表格单元格包含大量文本。。。除非指定高度，否则左侧的圆不会垂直居中。

.outer {
    border: 2px solid red;
    width: 200px;
    height: 200px;
}
.number-box {
    display: table;
    border: 1px solid green;
    border-radius: 30px;
    width: 60px;
    height: 60px;
    margin: 70px auto 0;
}
.number {
    font-size: 28px;
    line-height: 28px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

<div class="outer">
    <div class="number-box">
        <div class="number">1</div>
    </div>
</div>