Html 使用边框半径将文本居中放置在div中

我只想在一个div中显示垂直和水平中心文本，该div有一个由边框半径构成的包围圈。目前，文本显示在右下角，即

看看这里的小提琴：

我的css：

DIV {
  display: inline-block;
  width: 10%;
  border: 1.2em solid #dddddd;
  border-radius: 50%;
  max-width: 1.2em;
  max-height: 1.2em;
  box-sizing: border-box;    
  margin: 0 auto;
}

---

有什么想法吗？

只需设置div的

高度

/

宽度

，以及一个

行高度

，该行高度等于

高度

，即可实现垂直对齐

文本对齐：居中

将进行水平对齐

div{
显示：内联块；
文本对齐：居中；
/*宽度：10%*/
/*边框：1.2米实心#dddddd*/
背景色：#ddd；
宽度：2.4em；
高度：2.4em；
线高：2.4em；
边界半径：50%；
/*最大宽度：1.2米*/
/*最大高度：1.2米*/
/*框大小：边框框；*/
/*保证金：0自动*/
}

1
2.
3.
4.
5

圆心

我是为你做的，但只是相对位置。（否则，文本align:center；因为字符串的开头是数字的左边，所以不能正确工作）

加

例如：

DIV {
    display: inline-block;
    width: 10%;
    border: 1.2em solid #dddddd;
    border-radius: 50%;
    max-width: 1.2em;
    max-height: 1.2em;
    box-sizing: border-box;    
    margin: 0 auto;
   text-align:center;
    display: table-cell;
    vertical-align: middle;

}

---

我真的很想做出贡献。这就是我得到的：

DIV {
    display:inline-block;
    width: 10%;
    border: 1.5em solid #dddddd;
    border-radius: 50%;
    max-width: 1.15em;
    max-height: 1.15em;
    margin: 0 auto;
    text-align:center;
}

小提琴

已更新：（背景与边框颜色相同）

---

哈哈，美丽的圆圈！灰色应该被填满，这能用你的解决方案实现吗？我的错。。。只使用背景色：我不想只使用一个元素，对不起！

DIV {
    display:inline-block;
    width: 10%;
    border: 1.5em solid #dddddd;
    border-radius: 50%;
    max-width: 1.15em;
    max-height: 1.15em;
    margin: 0 auto;
    text-align:center;
}