求助：CSS无法居中表格内的圆形加载动画

Hey there! Let's get that loading spinner perfectly centered in your table body. The issue you're facing is probably tied to how the parent container is laid out, or the default display behavior of your .progress element. Here are a few tried-and-true solutions to fix this:

1. Use Flexbox (Most Reliable Approach) #

Flexbox is the easiest way to center elements both horizontally and vertically, no matter their type. Target the parent container of your .progress element (could be the <tbody> or a wrapper div inside it) and add these styles:

/* Replace .progress-container with your actual parent element selector */
.progress-container {
  width: 100%;
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically (great for taller tables) */
  min-height: 150px;       /* Give it some height so the spinner doesn't hug edges */
}

You won't need extra styles on the .progress element itself here—flexbox handles the centering automatically.

2. Convert .progress to a Block Element & Use Auto Margins #

If flexbox isn't an option, adjust the .progress element directly. The reason margin: auto didn't work before is likely because it's an inline/inline-block element by default. Try this:

.progress {
  display: block; /* Convert to block-level so margin:auto takes effect */
  width: 40px;    /* Set your spinner's actual width (tweak as needed) */
  margin: 0 auto; /* Auto left/right margins will center it */
}

Just make sure the parent container (like <tbody> or <td>) has width: 100% so the block element has space to center within.

3. Override Conflicting Table Cell Styles #

Sometimes table cells (<td>) have default padding or text alignment that throws things off. If your spinner lives inside a <td>, add this to ensure the cell itself is centered:

td.progress-cell {
  text-align: center;
  width: 100%;
}

Then apply the progress-cell class to the <td> holding your spinner.

Quick Debug Tip #

If none of these work, right-click the spinner in your browser (hit F12) and inspect it. Check the Computed tab to see if other CSS rules are overriding your styles (look for strikethrough properties). You can use !important temporarily to test, but try to avoid it by making your selectors more specific instead.

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