Question: My text in the button is not centered.
I feel that this happens all the time.
The text always seems to be a bit under the center.
I tried to open the code with Chrome and Edge. They look the same.
Here's a photo of the button

```css
.button-container {
  display: flex;
  position: absolute;
  top: 10px;
  right: 10px;
  text-align: center;
  vertical-align: middle;
}

.button {
  color: white;
  font-family: arial;
  font-size: 28px;
  background-color: black;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-style: none;
  border-radius: 50%;
}
```

```html
<div class="button-container">
  <button class="button">x</button>
</div>
```

Answer: 
Removing everything but the following provided the desire result of centering:

```
.button-container {
  text-align: center;
  vertical-align: middle;
}

```

Padding, in the comment above, is appropriate as well. Take your padding and simply apply it to the `.button-container` CSS script. It will move the button down slight from the top as well, like so:
[![enter image description here](https://i.stack.imgur.com/lwd7W.png)](https://i.stack.imgur.com/lwd7W.png)
add below codes to class .button-container:

```
align-items: center;
justify-content: center;

```