如何设置显示为圆形的div的垂直等分?

我认为你不需要额外的元素 或 文本,您需要的是 line-height 所有物

Demo

div {
    height: 50px;
    width: 50px;
    border: 1px solid #ddd;
    border-radius: 50%;
    font-weight: bold;
    line-height: 50px; /* Equals elements height */
    text-align: center;
}

如果你想,这个解决方案是完美的 vertical-align 单个单词,如果你想在水平和垂直方向上完美地居中一个元素,可以使用其他两种方法 display: table-cell; 具有 vertical-align: middle; 或者使用CSS定位。

CSS定位方式。。

说明:这里使用 position: relative; 在包装器/父元素上,然后进行赋值 position: absolute; 用于子元素。不过,这里有一个问题,您需要为试图居中的子元素指定固定的宽度。

Demo 2

div {
    height: 50px;
    width: 50px;
    border: 1px solid #ddd;
    border-radius: 50%;
    font-weight: bold;
    position: relative;
}

div span {
    position: absolute;
    border: 1px solid #f00;
    left: 50%;
    top: 50%;
    height: 20px;
    width: 24px;
    margin-top: -10px; /* Half of the elements height */
    margin-left: -12px; /* Half of the elements width */
}