如何在固定高度div中实现元素垂直居中？HTML/CSS技术求助

Hey there! Let's sort out that vertical centering problem you're facing with your to-do summary cards. You want the text inside those fixed-height boxes to be perfectly centered, and I've got a couple of straightforward fixes for you using flexbox (since you were already working with it) and even a simpler grid approach.

The Issue with Your Original Flex Code #

Your initial flex setup was almost there—you just used the wrong alignment property. You had align-content: center on the inner divs, but align-content only works when flex items wrap onto multiple lines. For single-line content (or even multi-line text like your second card), you need align-items: center instead. Plus, since your inner divs are using flex-direction: column, justify-content: center will handle vertical centering along the main axis, and align-items: center takes care of horizontal centering.

Fixed Flexbox Solution #

Replace your existing CSS with this updated version:

.todo-summary-wrapper { 
  display: flex; 
  flex-direction: row; 
  margin: 0 auto; 
  border: 0.2px solid white; /* Added 'solid' here—your original had no border style */
  width: 75%; 
  border-radius: 10px; 
  -webkit-box-shadow: 5px 5px 5px .1px rgba(8, 8, 8, 0.158); 
  -moz-box-shadow: 5px 5px 5px .1px rgba(8, 8, 8, 0.158); 
  box-shadow: 5px 5px 5px .1px rgba(8, 8, 8, 0.158); 
}

.todo-summary-wrapper div { 
  display: flex; 
  flex-direction: column; 
  margin: 0 auto; 
  border: red 1px solid; 
  border-radius: 10px; 
  width: 200px; 
}

.todo-summary-wrapper > div > div { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; /* Vertically centers content in the 200px height */
  align-items: center; /* Horizontally centers text */
  text-align: center; /* Ensures multi-line text stays centered */
  height: 200px; 
}

I also fixed a tiny oversight in your .todo-summary-wrapper border rule—you had border: 0.2px white but no border style (like solid), so that border wasn't rendering at all.

Even Simpler: Grid Layout #

If you want a more concise solution, CSS Grid makes centering trivial with just one key property. You can replace the inner div styles with this:

.todo-summary-wrapper > div > div { 
  display: grid;
  place-items: center; /* One line handles both horizontal + vertical centering */
  text-align: center;
  height: 200px; 
}

This works flawlessly for both single-line and multi-line text, and it’s way less code to remember.

Why the Table Layout Broke Your Row #

When you switched to display: table on the middle divs, you disrupted the flex flow of the parent .todo-summary-wrapper (set to flex-direction: row). Table elements don’t behave like standard flex items by default, which is why your layout shifted. Stick with flex or grid—they’re built for modern layout tasks like this.

Test either solution, and your text should be perfectly centered inside those 200px tall boxes while keeping your row layout intact!

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