How to make content in DIV align vertically

Question

<div id="content">ABC<div>UUU</div></div>

I just want to find some way to align vertically in middle for div#content . Actually I have some solutions. First one is using line-height , however it can not work if there's another div in the div#content . And vertical-align:middle I think just works for table? Is there any other usable solutions?

I try the vertical-align:middle and display:table-cell, the other issue comes, the width cannot works, i give that div a big width, that can fill out the screen(1438px), but now the width is also that number but just fill out the 1/3 width of screen. The table-cell seems like make every cell in the screen, but i just want to give them specified length for table cell.

Answer 1

使用此为您的要求

#content {display:table-cell; vertical-align:middle}

Answer 2

With display:table-cell declared on your element, vertical align will work.

#content {
    display:table-cell;
    vertical-align:middle
}

Answer 3

请参阅http://phrogz.net/css/vertical-align/index.html上有关常规DIV和嵌入式DIV的垂直对齐的详细说明。

Answer 4

Expounding upon other answers using display:table-cell;vertical-align:middle ... Table cells cannot have 100% width, but their containers can!

Using a CSS Table

Items with a table display accept dynamic widths:

#existingContainer {
    display: table;
    width: 100%;
}
#content {
    display: table-cell;
    vertical-align: middle;
    height: 100px; /* example */
}

Say, with sample HTML:

<div id="existingContainer">
    ...
    <div id="content">ABC<div>UUU</div></div>
    ...
</div>

Using a Clearing Div

Alternatively, putting your table-cell directly into a block element will ensure no inline elements sit beside it:

<div id="newContainer">    
    <div id="content">ABC<div>UUU</div></div>
</div>

With sample CSS:

#newContainer {
    display: block;
}
#content {
    display: table-cell;
    vertical-align: middle;
    height: 100px; /* example */
}