如何让圆形元素中的动态数字始终保持居中？

Great question! Getting dynamic numbers to stay perfectly centered in a circular box—no matter if it's 1 digit, 2 digits, or even more—is totally doable with a couple of solid CSS approaches. Let's break down the best solutions based on your existing code.

Option 1: Use Flexbox (Simplest & Most Reliable) #

Flexbox is made for alignment tasks like this. By converting your .Box to an inline flex container, you can center its content with just two lines of CSS, and it works seamlessly with dynamic content.

Here's the updated CSS:

.Box {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #9ba2a8;
  display: inline-flex; /* Swap inline-block for inline-flex */
  align-items: center; /* Vertically center content */
  justify-content: center; /* Horizontally center content */
  margin-left: 5px;
  position: relative;
  cursor: pointer;
  bottom: 15px;
  margin-top: 40px;
  margin-left: 40px;
}
.TLP-blueBg {
  background-color: #2b88c7;
  transition: background-color 0.35s ease;
}
.Text {
  color: #ffffff; /* Optional: Make text stand out against the background */
  font-size: 14px; /* Adjust to your needs */
  margin: 0; /* Remove default margin to avoid alignment shifts */
}

Why this works: #

• inline-flex keeps the circular box inline (just like inline-block) while enabling flex alignment.
• align-items: center and justify-content: center handle both vertical and horizontal centering automatically, regardless of the content's width or height.

Option 2: Absolute Position + Transform (For Older Browser Compatibility) #

If you need to support older browsers that don't fully handle flexbox, this method is a tried-and-true fallback. Since your .Box already has position: relative, we can use absolute positioning on the text:

.Box {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #9ba2a8;
  text-align: center;
  display: inline-block;
  margin-left: 5px;
  position: relative; /* Required for absolute positioning of child */
  cursor: pointer;
  bottom: 15px;
  margin-top: 40px;
  margin-left: 40px;
}
.TLP-blueBg {
  background-color: #2b88c7;
  transition: background-color 0.35s ease;
}
.Text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Shifts text back by 50% of its own size */
  color: #ffffff;
  font-size: 14px;
  margin: 0;
}

Why this works: #

• top: 50% and left: 50% move the top-left corner of the text to the center of the box.
• transform: translate(-50%, -50%) adjusts the text's position by half its own width and height, placing its true center exactly at the box's center. This works even if the text's size changes dynamically.

Quick Tips: #

• Avoid adding padding or margin to .Text unless you account for it in your alignment—extra space can throw off centering.
• If your numbers might get too long for the 35px box, add overflow: hidden to .Box or adjust the font size to prevent overflow.

内容的提问来源于stack exchange，提问作者Will