[CSS]-CSS implements an absolute center Div with an indefinite height

Source: http://www.knowsky.com/442392.html

In general, it is more convenient to specify the vertical and horizontal center of the DIV with a height, but it is a little troublesome if the height is not fixed. I tried it and achieved absolute center through two auxiliary Divs, compatible with standard browsers such as IE and ff.

CSSCode:

   # Wrapper  {  Height  :  100%  ;  Width  :  100%  ;  Overflow :  Hidden  ;  Position  :  Relative  ;}  
# Wrapper [ID]  {  Display  :  Table  ;  }  
# Mid  {  Position :  Absolute  ;  Top  :  50%  ;  Left  :  50%;  }  
# Mid [ID]  {  Display  :  Table-Cell  ;  Left :  0  ;  Vertical-align  :  Middle  ;  Position  :  Static  ;}  
# Box  {  Position  :  Relative  ;  Top :  -50%  ;  Left  :  -50%  ;  Z-Index  :  9999  ;  Width  :  300px;  }  
# Box [ID]  {  Left :  0  ;  Margin  :  0 auto  ;  }  
Div. boxstyle  {  Border  :  2px solid #000000  ;  Text-align  :  Center ;  Padding  :  5px  ;  }    

XHTML code:

   <  Div  ID  = "Wrapper"  >  
  < Div  ID  = "Mid"  >  
  <  Div  ID  = "Box"  Class  = "Boxstyle"  >  
  <  P  >  Http://bolm.cn </  P  >  
  <  P  >  Div absolute center example  </  P  >  
  </  Div  >  
  </  Div >  
  </  Div  >    

In a simple explanation, wrapper is the outer layer, mid is the middle layer, and box is the absolute center layer.

In standard browsers such as ff, you can set the wrapper layer demonstration mode to table, And the mid layer to the display mode of table-cell, so that you can use vertical-align: the middle implements the absolute vertical center of the middle layer, while the top: 50% method is used in IE, and the relative position-50% set in the box below is used to achieve the vertical center. The horizontal center method is also different. FF can easily set the margin implementation, while IE also sets the left offset method.

In addition, expressions like # Box [ID] are only known by ff and other standard browsers, so you can set styles for FF and other browsers here.

Because the box height is not set, the default value is Auto's height, and the width is also the same.