DIV + CSS: an example of vertical center of content

The code is as follows:

Copy code

==================================== CSS ====================== ====== . Holder { Width: 740px; Height: 300px; Border: 1px solid #777; Text-align: center; Display: table-cell; Vertical-align: middle; } /* The following style is for IE */ . Edge { Width: 0; Height: 100%; Display: inline-block; Vertical-align: middle; } . Container { Vertical-align: middle; Display: inline-block; } ========================================================== ========== ================================ HTML ========================== ==== <Div class = "holder"> <! -- [If IE]> <Span class = "edge"> </Span> <! [Endif] --> <! -- [If IE]> <Span class = "container"> <! [Endif] --> Test content test content <! -- [If IE]> </Span> <! [Endif] --> </Div>

========================================================== ==========
The code is changed a little. Note the following two points:
Labels in the IE condition annotation section of HTML must use inline object labels.
"<! -- [If IE]> <span class = "edge"> </span> <! [Endif] --> "before the content. If it is placed after, the content cannot be centered when it is Chinese.