如何在相对定位父容器中居中绝对定位的图片？

Hey Jake, I see the core issue here—you haven't set your image to position: absolute yet, which is why your centering attempts aren't pairing with the relative parent container. Let's fix that with two reliable, tried-and-true methods:

Method 1: Transform-Based Centering (Most Flexible) #

This approach works seamlessly even if your image or container sizes change later. Update your image CSS like this:

.tm-switch-image-container img {
  position: absolute; /* This is the missing critical piece! */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Shifts image back by half its own dimensions */
  width: 276px;
  height: 276px;
  max-width: none;
}

How it works: left: 50% and top: 50% move the top-left corner of the image to the exact center of the parent container. The transform rule then pulls the image left and up by half its own width/height, centering it perfectly without relying on fixed container sizes.

Method 2: Margin Auto (Ideal for Fixed-Size Elements) #

Since your image has a fixed width and height, this method is clean and straightforward:

.tm-switch-image-container img {
  position: absolute; /* Don't skip this! */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto; /* Browser automatically distributes space evenly */
  width: 276px;
  height: 276px;
  max-width: none;
}

How it works: By setting all four positional values to 0, you tell the browser the image can occupy the full bounds of the parent. margin: auto then centers the image both horizontally and vertically within that available space.

Either method will get your image perfectly centered with your existing relative parent container—pick whichever fits your workflow better!

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