Placing text in the middle of the circle

[javascriptcoding5678]

I tried absolute positing, margin auto, that didn’t work

I tried these, they had no effect.

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;

code: https://jsfiddle.net/fLmhnyz1/1/

.image {
  position: relative;
  display: inline-table;
  overflow: hidden;
}

span {
  font-size: 14px;
  color: #892CDC;
  text-align: center;
  font-family: New Times Roman;
}

.layer {
  display: flex;
  width: 154px;
  height: 154px;
  overflow: hidden;
  position: absolute;
  top: 10px;
  left: 50px;
  box-shadow: 0 0 0 500px blue;
}

.layer2 {
  margin: auto;
  width: 150px;
  height: 150px;
  box-shadow: 0 0 0 150px white;
  border-radius: 50%;
  overflow: hidden;
}

<div class="image">
  <img src="https://picsum.photos/500" width="500" alt="Sea View">

  <div class="layer">

    <div class="layer2">
      <span>“Some Text Here”</span>
    </div>
  </div>
</div>

[Roma]

There is a way to do what you want using position: absolute; but I don’t see where you’ve tried it in your fiddle.

Have you tried searching?
As a search term I tried css position text in center of parent container and was able to find to successfully do what you want.

Here’s something I did a while ago that shows the centered text better. And to be completely honest/transparent, I used that same search term to find out how to center the text

[javascriptcoding5678]

This worked.

code: https://jsfiddle.net/083brwqu/

.image {
  position: relative;
  display: inline-table;
  overflow: hidden;
}

.layer {
  display: flex;
  align-items: center;
  width: 154px;
  height: 154px;
  overflow: hidden;
  position: absolute;
  top: 10px;
  left: 5px;
  box-shadow: 0 0 0 50px blue;
}

.layer2 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 150px;
  height: 150px;
  box-shadow: 0 0 0 150px white;
  border-radius: 50%;
  overflow: hidden;
}
  span {
    font-size: 14px;
    color: #892CDC;
    font-family: New Times Roman;
  }

<div class="image">
  <img src="https://picsum.photos/200" height="200" alt="Sea View">

  <div class="layer">

    <div class="layer2">
      <span>“Some Text Here”</span>
    </div>
  </div>

</div>

[Roma]

Nice job.

Since you had mentioned using position: absolute; and wanting the text in the middle of a circle I took the liberty of changing your code slightly to show another way to do it.
You can find it in this sample pen.