align-middle question

问题

What is my misunderstanding about the way that vertical-align:middle; works?

I have posted (http://jsfiddle.net/D6RwZ/) some code which I would expect to vertically align a red rectangle in a blue rectangle, but it doesn't look like that.

回答1:

Vertical-align only works on inline images and display: table-cell.

I've used this solution a few times and it works quite well but takes some work. If you're working with fixed size elements position absolute is by far the simplest. Dynamic sized elements and vertical centering can be very tricky, lots of browser quirks to deal with.

回答2:

vertical-align:middle won't work on div (block element). You can refer here for details.

If you want to vertical align, I think the only option is using margin/padding with appropriate parameters.

回答3:

vertical-align can only be applied to elements with:

• display:table-cell in order to vertically align the contents of the element.
• display:inline or display:inline-block in order to vertically align the element within the text line that contains it

A cheap hack with the latter : http://jsfiddle.net/8bZQS/

来源：https://stackoverflow.com/questions/5516630/align-middle-question