求助：Div内图片无法垂直居中，原正常现失效

Hey Alex, let's troubleshoot why your inline-box centering stopped working and get that image perfectly centered both ways again. First, let's cover the most common reasons your old setup might have broken, then jump to reliable, modern solutions that are less prone to unexpected issues.

Why Your Inline-Box Setup Might Have Failed #

Chances are, a later CSS rule is overriding your original styles. Here are the usual culprits:

• Your container doesn't have an explicit height set (inline-box/line-height tricks rely on a fixed container height)
• The image's display property was changed from inline-block to block
• A parent element added float, position: absolute, or overflow: hidden that disrupted the inline layout
• The container's line-height was overwritten by a more specific CSS selector

You can verify this by right-clicking the container in your browser's dev tools (F12) and checking the Computed tab to see which styles are actually being applied.

Reliable Solutions for Perfect Centering #

1. Flexbox (Recommended for Modern Browsers) #

Flexbox is the simplest and most robust way to center elements—no weird hacks required. It works consistently across all modern browsers and avoids the pitfalls of inline-box layouts.

/* Apply to your div container */
.image-container {
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center;     /* Vertical centering */
  height: 300px; /* Set your desired container height (e.g., 100vh for full viewport) */
  width: 100%; /* Optional, set container width if needed */
}

/* Optional: Prevent image from overflowing the container */
.image-container img {
  max-width: 100%;
  max-height: 100%;
}

2. CSS Grid (Even More Concise) #

If you're targeting newer browsers, Grid is even shorter. The place-items property handles both vertical and horizontal centering in one line:

.image-container {
  display: grid;
  place-items: center;
  height: 300px; /* Required explicit height */
  width: 100%;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
}

3. Fixing Your Original Inline-Box Setup #

If you want to stick with your original approach, here's the corrected, bulletproof version:

.image-container {
  height: 300px; /* Must have fixed height */
  text-align: center; /* Horizontal centering */
  line-height: 300px; /* Match container height */
}

.image-container img {
  display: inline-block;
  vertical-align: middle;
  line-height: normal; /* Reset line-height to avoid spacing issues */
}

Make sure no other CSS rules are overriding these properties. Use dev tools to check for strikethrough styles (which mean they're being overwritten).

4. Table-Cell (For Old Browser Compatibility) #

If you need to support very old browsers like IE8, use the table-cell method:

.image-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 300px;
  width: 100%;
}

Final Tip #

Always test your styles in browser dev tools to spot conflicting rules. The Elements tab will show you exactly which styles are being applied and which are being overridden.

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