未知长宽元素在已知300px*300px的容器中垂直居（IE6/7/8/FF）

上次电话面试没答出来，今天重新记录一下。FF下的确难搞...郁闷

加了很多HACK，顺便复习一下！

*+property:value; /* IE7 */ 
_property:value; /* IE6 */ 

*property:value; /*IE6、IE7 共用*/ 

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > IE6/7/8/FF垂直居中 </ title >
< style >
*  {  margin : 0 ;  padding : 0 ;   }
#out  {  display : table ;  background-color : #F00 ;  width : 300px ;  height : 300px ;  _position : relative ;  overflow : hidden ;   }
#mid  {  vertical-align : middle ;  display : table-cell ;  _position : absolute ;  _top : 50% ;  -left : 50% ;   }
#in  {  _position : relative ;  _top : -50% ;  _left : -50% ;  text-align :  center ;   }
*+html #out  {  background-color : #F00 ;  width : 300px ;  height : 300px ;  position : relative ;  overflow : hidden ;   }
*+html #mid  {   position : absolute ;  top : 50% ;  left : 50% ;   }
*+html #in  {  position : relative ;  top : -50% ;  left : -50% ;   }
</ style >
</ head >
< body >
< div  class ="container" >
< div  id ="out" >
     < div  id ="mid" >
         < div  id ="in" >  FF垂直居中FF直居中 < br  />
            FF垂直居中F直居中 < br  />
            FF垂直居中F直居中 < br  />
            FF垂直居中F直居中 < br  />
         </ div >
     </ div >
</ div >
</ body >
</ html >

 

转载于:https://www.cnblogs.com/cnfiowen/archive/2009/10/29/1592624.html