垂直/水平对齐表格单元格中包含的div中的数字

Question

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

到目前为止，我所能提出的所有内容都是将div放在表格单元格中，但无论我尝试什么，我都无法将文本垂直居中于该div中。

有人可以帮忙吗。

Fiddle

.outer {
    display: table;
    border: 2px solid red;
    width: 200px;
    height: 200px;
}
.inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border: 1px solid blue;
    width: 50%;
}
.number-box {
    display: inline-block;
    border: 1px solid green;
    border-radius: 30px;
    width: 60px;
    height: 60px
}
.number {
    display: inline-block;
    border: 2px solid blue;
    font-size: 28px;
}

<div class="outer">
    <div class="inner">
        <div class="number-box">
            <div class="number">1</div>
        </div>
    </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>

Answer 1

试试这个。我删除了你的一个元素。可以毫不费力地更换它。

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

Demo

这里需要注意的是font-size和line-height必须匹配。