CSS解决未知高度的垂直水平居中自适应问题

今天有人问起，晚上试着写出来，供参考；以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。从最简单的开始………… 一、如何让一个DIV水平居中？这个简单不作过多说明！复制代码代码如下: <style> body { text-align:center} #info{ margin:0 auto; width:500px; text-align:left; border:1px solid #3333FF} </style> </head> <body> <div id="info">this is test.</div> </body> <!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>www.jb51.net</title> <style> body { text-align:center} #info{ margin:0 auto; width:500px; text-align:left; border:1px solid #3333FF} </style> </head> <body> <div id="info">this is test.</div> </body> </html> 提示：您可以先修改部分代码再运行二、DIV已知高度，如何让他水平加垂直居中？如果想水平加垂直居中的DIV已知高度和宽度，是最好办的了！ 1、先让这个DIV绝对定位； 2、让他距离上边50%，左边50%；这会这个DIV的左上角这个点就是窗口的正中间； 3、因为已经知道了这个DIV的高和宽了，那么再从这里点向左移动总宽的一半就可以了，也就是200PX；向上呢也同理；复制代码代码如下: <style> #info{top:50%;left:50%; position:absolute; width:600px; height:400px; margin:-200px -300px; border:1px solid #f00;} </style> <div id="info">this is test.</div> <!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>www.jb51.net</title> <style> #info{top:50%;left:50%; position:absolute; width:600px; height:400px; margin:-200px -300px; border:1px solid #f00;} </style> </head> <body> <div id="info">this is test.</div> </body> </html> 提示：您可以先修改部分代码再运行三、DIV不知道高度怎么让他水平和垂直居中？这个比较麻烦，用上边的方法的一半再加一些代码才能实现！首先我先按上边代码意思接着写，注意，下边的代码是我写好的第一步，只支持IE6和IE7，不过先看一下！复制代码代码如下: <style> body {padding:0; margin:0; } #infoBox{ position:absolute; top:50%; width:100%; text-align:center;} #info{position:relative; top:-50%; right:0; border:1px solid #333399; text-align:center;} /*这里可以指个宽度试试，是可以自适应的*/ </style> <div id="infoBox"> <div id="info"> this is test.this is test.this is test.this is test.this is test.this is test.this is test.this is test. </div> </div> <!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>www.jb51.net</title> <style> body {padding:0; margin:0; } #infoBox{ position:absolute; top:50%; width:100%; text-align:center;} #info{position:relative; top:-50%; right:0; border:1px solid #333399; text-align:center;} /*这里可以指个宽度试试，是可以自适应的*/ </style> </head> <body> <div id="infoBox"> <div id="info"> this is test. this is test. this is test. this is test. this is test. this is test. this is test. this is test. </div> </div> </body> </html> 提示：您可以先修改部分代码再运行那么，如果让Firefox再支持一下就可以，对吧！所以接着写！标准浏览器可将父级元素显示方式设定为display: table;，内部子元素设为display:table-cell 和vertical-align；使其垂直居中，但非标准浏览器是不支持；也就是说这样设完后IE6是不支持的，但FIREFOX和IE是支持的；我用的是最笨的办法，从上往下一级级覆盖；复制代码代码如下: <style> body {padding:0; margin:0; } /*这些是专用FIREFOX写的，注意IE7也认识*/ html,body{ height:100%;} #infoBox[id]{text-align:center; width:100%; height:100%; display:table;} #info[id]{ display:table-cell; vertical-align:middle;} /*这里可以指个宽度试试，是可以自适应的*/ /*专为IE6写的*/ *html #infoBox{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto} *html #info{position:relative; top:-50%; border:1px solid #333399; text-align:center;} /*这里可以指个宽度试试，是可以自适应的*/ /*这理是专用IE7写的，注意[id]要加上，不然优先JI没有最上边那段NB*/ *+html #infoBox[id]{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto} *+html #info[id]{position:relative; top:-50%; border:1px solid #333399; text-align:center;} /*这里可以指个宽度试试，是可以自适应的*/ </style> <div id="infoBox"> <div id="info"> this is test.this is test.this is test.this is test.this is test.this is test.this is test.this is test. </div> </div> </html> <!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>www.jb51.net</title> <style> body {padding:0; margin:0; } /*这些是专用FIREFOX写的，注意IE7也认识*/ html,body{ height:100%;} #infoBox[id]{text-align:center; width:100%; height:100%; display:table;} #info[id]{ display:table-cell; vertical-align:middle;} /*这里可以指个宽度试试，是可以自适应的*/ /*专为IE6写的*/ *html #infoBox{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto} *html #info{position:relative; top:-50%; border:1px solid #333399; text-align:center;} /*这里可以指个宽度试试，是可以自适应的*/ /*这理是专用IE7写的，注意[id]要加上，不然优先JI没有最上边那段NB*/ *+html #infoBox[id]{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto} *+html #info[id]{position:relative; top:-50%; border:1px solid #333399; text-align:center;} /*这里可以指个宽度试试，是可以自适应的*/ </style> </head> <body> <div id="infoBox"> <div id="info"> this is test. this is test. this is test. this is test. this is test. this is test. this is test. this is test. </div> </div> </body> </html> 提示：您可以先修改部分代码再运行这时你又会发现，在IE和FIREFOX中怎么效果不一样呢？FIREFOX中没有那个边框；对的…… 如果你看一下info这个DIV，他其它是占高度100%的；这时的同一个布局在不同的浏览器是展示出来隐在效果已经完全不一样了；那么怎么办？所以，再用最后一个办法；再加一个空的DIV就行了，我起了个好名字，叫tnnd；最后的效果如下； <!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>www.jb51.net</title> <style> body {padding:0; margin:0; } /*这些是专用FIREFOX写的，注意IE7也认识*/ html,body{ height:100%;} #infoBox[id]{text-align:center; width:100%; height:100%; display:table;} #info[id]{ display:table-cell;vertical-align:middle;} /*这里可以指个宽度试试，是可以自适应的*/ /*专为IE6写的*/ *html #infoBox{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto} *html #info{position:relative; top:-50%; text-align:center;} /*这里可以指个宽度试试，是可以自适应的*/ /*这理是专用IE7写的，注意[id]要加上，不然优先JI没有最上边那段NB*/ *+html #infoBox[id]{ position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto} *+html #info[id]{position:relative; top:-50%; text-align:center;} /*这里可以指个宽度试试，是可以自适应的*/ #tnnd{ border:1px solid red; width:500px; margin:0 auto; font-size:12px; line-height:1.8;} </style> </head> <body> <div id="infoBox"> <div id="info"> <div id="tnnd"> <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a> <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a> <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a> <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a> <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a> <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a> <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a> <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a> <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a> <a href="http://www.zishu.cn/blogview.asp?logID=818" target="_blank">CSS几个居中问题的解决办法 </a> </div> </div> </div> </body> </html> 提示：您可以先修改部分代码再运行后边这种是最麻烦的，重点在于IE67和FIREFOX中间的差别和他们相互之间是如何的一些关系；我看过很多关于这个问题的解决方法，都不是特别的理想，希望这种方法能解决大部分的问题！本来以为半小时弄完，没有想到卡在FIREFOX这里了，弄了二个多小时！周末了，不早了，凌晨2：30了，睡了！晚安…… 相关资料可参考： 1、CSS解决未知高度垂直居中 -- 垂直居中方面可参考一下 2、CSS作的小灯笼效果 -- hack方面参考转载请注明出处：子鼠

　　推荐阅读

　　条件CSS的高级用法

条件CSS(Conditional-CSS)并不仅仅对用户使用的浏览器感兴趣，而是对用户浏览器使用的渲染引擎更感兴趣。这就是条件(Conditional-CSS)使用 ‘Geckko’ 而非广为所知的 Firefox 作为>>>详细阅读

本文标题：CSS解决未知高度的垂直水平居中自适应问题

地址：http://www.17bianji.com/kaifa2/CSS/16933.html

1/2 1