CSS 解决未知高度垂直居中实现代码
导读：收集整理的这篇文章主要介绍了CSS 解决未知高度垂直居中实现代码，觉得挺不错的，现在分享给大家，也给大家做个参考。 标准浏览器如Mozilla, opera, Safari等.，可将父级元素显示方式设定为TABLE(display...
收集整理的这篇文章主要介绍了CSS 解决未知高度垂直居中实现代码，觉得挺不错的，现在分享给大家，也给大家做个参考。 标准浏览器如Mozilla, opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;
) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。 非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。
CSS
复制代码代码如下:
body { padding: 0; margin: 0; }
body,htML{ height: 100%; }
#outer { height: 100%; overflow: hidden; posITion: relative; width: 100%; background:ivory; }
#outer[id] { display: table; position: static; }
#middle { position: absolute; top: 50%; } /* for explorer only*/
#middle[id] { display: table-cell; vertical-align: middle; position: static; }
#inner { position: relative; top: -50%; width: 400px; margin: 0 auto; } /* for explorer only */
div.greenBorder { border: 1px solid green; background-color: ivory; }
xhtml
复制代码代码如下:
div id="outer">
div id="middle">
div id="inner" class="greenBorder">
/div>
/div>
/div>
以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value[id]。
CSS2选择器#value[id]相当于选择器#value，但是internet Explorer不支持这种类型的选择器。同样地.value[class]，相当于.value,这些只有标准浏览器能读懂。
测试：Firefox1.5、OPEra9.0、IE6.0、IE5.0通过。
!DOCTYPE html PubLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> html XMlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-type" content="text/html; charset=gb2312" /> title> Vertical centering in valid CSS/title> style type="text/css"> body { padding: 0; margin: 0; font-Size: 75%; line-height: 140%; font-family:Arial, Helvetica, sans-serif; } body,html{ height: 100%; } a{ color: #333; } a:hover{ color: green; } #outer { height: 100%; overflow: hidden; position: relative; width: 100%; background:ivory; } #outer[id] { display: table; position: static; } #middle { position: absolute; top: 50%; text-align:center; } /* for explorer only*/#middle[id] { display: table-cell; vertical-align: middle; position: static; } #inner { position: relative; top: -50%; width: 600px; margin: 0 auto; text-align:left; } /*for explorer only */div.greenBorder { border: 1px solid green; background-color: #FFF; } p{ margin: 1em; } /style> script type="text/javascript"> // ![CDATA[function toggleContent(name,n) { VAR i,t='',el = document.getElementById(name); if (!el.origCont) el.origCont = el.innerHTML; for (i=0; in; i++) t += el.origCont; el.innerHTML = t; } // ]]> /script> /head> body> div id="outer"> div id="middle"> div id="inner" class="greenBorder"> p> a href="javascript:toggleContent('inner',1)"> 默认长度/a> & nbsp; & nbsp; a href="javascript:toggleContent('inner',2)"> 加长页面/a> /p> p> 1.打开illustrator,新建一个文件，画个矩形，比你要导入的图片大一些，白色填充。 2.选中矩形，菜单：Effect > Distort & amp; Transform > Zig Zag，设置如下图。 3.菜单：Effect > Stylize > Drop Shadow，设置如下图。 1.打开illustrator,新建一个文件，画个矩形，比你要导入的图片大一些，白色填充。 2.选中矩形，菜单：Effect > Distort & amp; Transform > Zig Zag，设置如下图。 3.菜单：Effect > Stylize > Drop Shadow，设置如下图。/p> /div> /div> /div> /body> /html>
ffcod = delpost.runcode5 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode5 .value = ffcod; 提示：您可以先修改部分代码再运行
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS 解决未知高度垂直居中实现代码
本文地址： https://pptw.com/jishu/584703.html