[CSS] - CSS实现不定高度DIV绝对居中

来源：http://www.knowsky.com/442392.html

一般来说，指定高度的DIV垂直和水平居中比较方便，而不定高度的话就稍微麻烦了点，我尝试了一下，通过2个辅助的DIV实现了绝对居中，兼容IE和FF等标准浏览器。

CSS代码：

#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代码：

< div id ="wrapper" >
< div id ="mid" >
< div id ="box" class ="boxstyle" >
< p > http://bolm.cn </ p >
< p > DIV 绝对居中示例 </ p >
</ div >
</ div >
</ div >

     简单解释下，wrapper为外层，mid为中间层，box即为绝对居中的那层。

     在FF等标准浏览器中可以通过将wrapper层的演示方式为table，mid层设置为table-cell的显示方式，这样就可以使用 vertical-align:middle实现中间层的绝对垂直居中，而IE中则使用了top:50%的方式，以及后面box设置的相对定位-50%来 达到垂直居中。水平居中的方式也不同，FF可以很简单的设置margin实现，而IE则同样设置了left互相抵消的方式实现。

     另外类似#box[id]这样的表达方式只有FF等标准浏览器认识，所以可以在这里设置属于FF等浏览器的样式。

     由于未设置box的高度，默认就为auto不定高了，不定宽也同理。

转载于:https://www.cnblogs.com/hcbin/archive/2010/05/14/1735528.html