The fourth method:
This method sets the display of some div as a table, so we can use the Vartial-align property of the table.
The code is as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <styletype= "Text/css"> #wrapper { display: table; }#cell{Height:300px;//If the height is not set, the effect is not obvious and appears to be not centered, but is actually centered in the wrapper.Background-color:Yellow;Display:Table-cell;vertical-align:Middle;}. Content{Height:100px;//plus height is to show more obviousBackground-color:Red;} </style></Head><Body> <DivID= "wrapper"> <DivID= "Cell"> <Divclass= "Content">Diveeeeeeeeeeeeeeeeeeeeeeeeeeeeeuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu Uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuueeeeeeeeeeeee</Div> </Div> </Div></Body></HTML>
Advantages:
- Content can dynamically change height. Content is not truncated when there is not enough space in the wrapper
Disadvantages:
- Not valid in Internet Explorer (even IE8 beta), many nested tags
The display results are as follows:
CSS Vertical centering Method (ii)