css - 如何在内容文本中对齐和​​水平居中？

Question

.port {
  position: relative;
}

.element {
  margin-bottom: 1rem;
  cursor: pointer;
}

.element::before {
  content: 'this text has to vertical and horizontal center';
  position: absolute;
  background-color: red;
  transition: .7s;
  left: 0;
  width: 300px;
  height: 300px;
}

<div class="front port">
  <div class="element">
    <img src="https://via.placeholder.com/300" alt="">
  </div>

</div>

JSFiddle：https ://jsfiddle.net/xac2kpo3/7/

我必须将此内容文本居中。但我不应该打扰这个结构，我不能添加额外的 div。

有什么办法吗？如果你帮助我，我会很高兴。谢谢

标签： css