在另一个 div 中垂直和水平居中包含文本的 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

You can do it via flex by applying it on the parent. No need to apply any CSS on the child (mark) for that matter.

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

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

Answer 3

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

Remove position and use this