How to align and horizontal center in content text?

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/

I have to center this content text. But I should not disturb this structure, I can not add extra div.

Is there any way for this? If you help me I will be glad. Thank you