伪元素的内容属性中的垂直中心文本

Question

我试图在我的content pseudo-element的after属性中居中垂直文本。我搜索了一些答案，找到了属性vertical-align: baseline;和display: inline-block;，但它没有用。我也尝试了vertical-align: middle;和vertical-align: -50%与display: block;（也来自其他答案）的合并，但无法弄清楚为什么它不起作用。目前我的"!"在底部并没有像我预期的那样垂直居中。有任何想法吗？

.wrapper {
  width: 25px;
  height: 25px;
  border-radius: 25px;
  border: 1px solid #93B8C2;
  padding: 5px;
  position: relative;
}

.wrapper::after {
  content: "!";
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #DD3322;
  display: inline-block;
  color: white;
  text-align: center;
  position: absolute;
  right: 0;
  top: 25px;
  vertical-align: baseline;
  padding: 3px;
}

<div class="wrapper"></div>

Answer 1

找到了我自己的答案：我用flexbox属性display: flex;，align-items: center;和justify-content: center;解决了它，以解决pseuo-element的垂直对齐问题。我也可以删除text-align和vertical-align属性。

方案如下：

.wrapper {
  width: 25px;
  height: 25px;
  border-radius: 25px;
  border: 1px solid #93B8C2;
  padding: 5px;
  position: relative;
}

.wrapper::after {
  content: "!";
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #DD3322;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: absolute;
  right: 0;
  top: 25px;
  padding: 3px;
}

<div class="wrapper"></div>