CSS: Text in a button is not centered

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:

You are trying to position an element using hard coded padding values. My advice would be not to do that.

Remove the padding and change your x -> X. Then add these to your class

.button {height: 15px; aspect-ratio: 1/1;}

Whatever you set the height to the width will follow. With your border radius you can turn that clean box into a clean circle.

Edit: Recommendations aside, your main issue was caused by the use of a lowercase x which comes with a blank space 'baked in' above the letter. On the other hand, an uppercase X uses the whole line height and fills the container nicely.

There are two big issues in your code:

• First, you want your button to have the same height and width.

  Either set those two properties separately or use the aspect-ratio property as suggested by @fluffybacon.

• Then, you are using a character that it's not a perfect cross, and using font-family, which means that you don't have total control over how the symbol is going to look or how well aligned it's going to be across different devices and OSs.

  Replace the x / X letter with the multiplication sign symbol (×) (better solution, but not perfect) or with an SVG icon or image that has the exact shape you want (best option).

  You can find a lot of good icons here: https://materialdesignicons.com/

• There's no CSS code to align the content of the button in both axis, so make sure you add display: flex, align-items: center and justify-content: center so that any content (text or not, like the SVG icon) are aligned properly.

Here's some alternatives:

button {
  position: fixed;
  top: 100%;
  left: 50%;
  font-size: 28px;
  width: 48px;
  height: 48px; 
  border-radius: 1000px;
  color: black;
  background: white;
  border: 2px solid black;
  line-height: 1;
  
  /* Add this to make sure any content in the button (text */
  /* or not) is centered in both axis: */
  display: flex;
  align-items: center;
  justify-content: center;
}

button::before {
  content: attr(class);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 4px 8px;
  border-radius: 4px;
  background: black;
  color: white;
  transform-origin: 0 50%;
  transform: rotate(-45deg);
  font-family: monospace;
  font-size: 12px;
}

.lowercase {
  font-family: arial;
  transform: translate(-300%, -125%);
}

.uppercase {
  font-family: arial;
  transform: translate(-175%, -125%);
}

.svg {
  transform: translate(-50%, -125%);
}

.multiplyArial {
  font-family: arial;
  transform: translate(75%, -125%);
}

.multiplyMonospace {
  font-family: monospace;
  transform: translate(200%, -125%);
}

.bar {
  position: fixed;
  bottom: 36px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 0, 255, .75);
}

<button class="lowercase">x</button>
<button class="uppercase">X</button>

<button class="svg">
  <svg style="width:1em;height:1em" viewBox="0 0 24 24">
      <path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
  </svg>
</button>

<button class="multiplyArial">×</button>
<button class="multiplyMonospace">×</button>

<div class="bar"></div>

Also, the best way to make something round (not oval) is to set border-radius to an arbitrary large value like 1000px (must be bigger than max(width, height) / 2) instead of using border-radius: 50%. See the difference below:

div {
  border: 2px solid black;
  padding: 8px;
  margin-top: 8px;
  text-align: center;
  font-family: monospace;
}

.round {
  border-radius: 1000px;
}

.oval {
  border-radius: 50%;
}

<div class="round">ROUND</div>
<div class="oval">OVAL</div>

use for button class

.button {
   text-align: center;
}

add below codes to class .button-container:

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