Use CSS to vertically center unknown height content

Solution 1:

 <!  Doctype html  >  <  Html  >  <  Head  >      <  Meta  Charset  = "UTF-8"  />      <  Title  > Demo </  Title  >      <  Style  Type  = "Text/CSS"  >  # Outer  {  Width  :  500px  ; Height  :  200px  ;  Margin  :  50px auto  ;  Border  :  1px solid # ccc ;  Display  :  Table  ;  Text-align  :  Center  ;  # Position  : Relative  ;          }  # Middle  {  Display  :  Table-Cell  ;  Vertical-align  : Middle  ;  # Position  :  Absolute  ;  # Top  :  50%  ;  # Left :  50%  ;          }  # Inner  {  # Position  :  Relative  ;  # Top :  -50%  ;  # Left  :  -50%  ;          }      </  Style  >  </  Head  > <  Body  >      <  Div  ID  = "Outer"  >          <  Div  ID  = "Middle"  >              <  IMG  ID  = "Inner"  SRC = "Http://static.cnblogs.com/images/logo_small.gif"  />          </  Div  >      </  Div  >  </  Body  >  </  Html  > 

Solution 2:

 <!  Doctype html >  <  Html  >  <  Head  >      <  Meta  Charset  = "UTF-8"  />      <  Title  > Demo </  Title >      <  Style  Type  = "Text/CSS"  >  # Outer  {  Width  :  500px  ;  Height :  200px  ;  Margin  :  50px auto  ;  Border  :  1px solid # ccc  ; Position  :  Relative  ;          }  # Inner  {  Position  :  Relative  ; Left  :  50%  ;  Top  :  50%  ;  Margin-left  :  -71px ;  Margin-top  :  -27px  ;          }      </  Style  >  </  Head  >  <  Body  >     <  Div  ID  = "Outer"  >              <  IMG  ID  = "Inner"  SRC  = "Http://static.cnblogs.com/images/logo_small.gif"  />      </  Div  >  </  Body >  </  Html  > 

Solution 1 the main principle is to use table and table-Cell Layout in a standard browser, and then use vertical-align: middle to center elements, but ie67 does not support table layout, therefore, CSS hake is used, which is an attribute starting.

Solution 2 uses negative margin, but the disadvantage is to know the width and height of the center content.