Css 伪类前后的问题

在伪元素前后提供的内容中，是否可以保持文本中心和中间对齐？我试图把一个段落集中在括号中间。

---

在这种情况下，您需要使用一些

相对

和

绝对

定位，您还必须为段落设置宽度

p {
  position: relative;
  top: 0;
  left: 0;
  width: 250px;
}

---

当然，绝对定位它们，并使用平移来确保垂直对齐：

p {
    position: relative;
}

p::before {
    content: "{";
    left: 0;
}

p::after {
    content: "}";
    right: 0;
}

p::before, p::after {
    top: 50%;
    color: #F1722E;
    font-size: 90px;
    position: absolute;
    transform: translateY(-50%);
}

---

Fiddle:

想想你正在写的代码。为什么一个支架的高度是150像素，另一个是50像素？当段落宽度改变时会发生什么…大括号的高度/位置会发生什么变化？此外，浮动会忽略文档流，因此使用浮动会完全忽略段落的位置。

p {
    position: relative;
}

p::before {
    content: "{";
    left: 0;
}

p::after {
    content: "}";
    right: 0;
}

p::before, p::after {
    top: 50%;
    color: #F1722E;
    font-size: 90px;
    position: absolute;
    transform: translateY(-50%);
}