Center div element containing text vertically and horizontally in another div

Question

I know that there are many similar questions; however, I'm unable to center my example with those answers.

I have the following page structure:

.close-button {
  margin-top: auto;
  padding: 0;
  cursor: pointer;
  border: none;
  border-radius: 5rem;
  background: black;
  color: white;
  position: relative;
  width: 5em;
  height: 5em;
}

.close-button .mark {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<button class="close-button">
        <div class="mark">+</div>
</button>

I want to center the textContent of the mark div in the middle of the created circle, as you can see my attempt with position: absolute did not work. I also tried it with flex, however, that also did not create the result I wanted to achieve. Furthermore, I also stumbled upon margin-collapse, but I doubt that it is the issue here.

How can I center my text vertically and horizontally in the created circle?

Answer 1

You can do it by adding these properties in your classes

.close-button{
  display: grid;
  place-items: center;
}

Before doing that, remove these properties:

.close-button {
  position: relative;
}
.close-button .mark {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Answer 2

.close-button .mark {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

Remove position and use this