Html CSS如何在伪元素中垂直对齐文本

我创建了一个伪元素来覆盖无序列表，css如下所示：

.pricing-column.featured::after {
    content: "Most Popular";
    background: #52BDE6 none repeat scroll 0% 0%;
    color: #FFF;
    width: 80px;
    border-radius: 100%;
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: 1000;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9em;
    line-height: 0.9em;
    padding: 10px;
    display: inline-block;
    height: 80px;
}

然而，通过这种方式，伪元素中的文本位于我的元素的顶部——有没有办法使它垂直居中

---

这里有一把小提琴

如果你想垂直居中，请使用

top:calc（50%-40px）40px是元素的一半


编辑：

抱歉，更新使用
display:inline flex和
对齐项目：居中

最简单的方法是什么？在顶部添加填充物。更难但更好的方法是使用flexbox

这些属性就行了

display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;

只要您可以更改伪元素的位置，那么这将起作用

改变
位置：绝对至<代码>位置：相对并相应地调整
顶部
和
左侧
值

要使文本居中，请应用
显示：表格单元格，
文本对齐：居中和
垂直对齐：中间

.pricing-column.featured::after {
    content: "Most Popular";
    background: #52BDE6 none repeat scroll 0% 0%;
    color: #FFF;
    width: 80px;
    border-radius: 100%;
    position: relative;
    top: -35px;
    left: -90px;
    z-index: 1000;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9em;
    line-height: 0.9em;
    padding: 10px;
    display: table-cell;
    height: 80px;
    text-align: center;
    vertical-align: middle;
}

对不起，也许我的问题不清楚，我想把文本放在伪元素的中心，而不是元素本身。谢谢thoughGenuis，谢谢您，先生-今晚将阅读“flex”酒店的相关信息！