html - 垂直/水平居中表格单元格中包含的 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 必须匹配。