今天图老师小编要向大家分享个CSS实现不定高度DIV绝对居中教程，过程简单易学，相信聪明的你一定能轻松get！
【 tulaoshi.com - Web开发 】
一般来说，指定高度的DIV垂直和水平居中比较方便，而不定高度的话就稍微麻烦了点，我尝试了一下，通过2个辅助的DIV实现了绝对居中，兼容IE和FF等标准浏览器。
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）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 #000;text-align:center;padding:5px;}
XHTML代码：
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）div id="wrapper"
div id="mid"
div id="box" class="boxstyle"
phttp://bolm.cn/p
pDIV绝对居中示例/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.tulaoshi.com/n/20160219/1621697.html
看过《CSS实现不定高度DIV绝对居中》的人还看了以下文章 更多>>
