《纯CSS实现完美决对居中 自动滚动条 根据内容宽度、高度自适应,垂直水平居中,自动出现滚动条.doc》由会员分享，可在线阅读，更多相关《纯CSS实现完美决对居中 自动滚动条 根据内容宽度、高度自适应,垂直水平居中,自动出现滚动条.doc（4页珍藏版）》请在金锄头文库上搜索。
1、纯CSS实现完美决对居中，几乎无BUG。绝对完美。自动出现滚动条。纯CSS实现完美决对居中，几乎无BUG。绝对完美。自动出现滚动条。body padding:0; margin:0; /*这些是专用FIREFOX写的，注意IE7也认识*/html,body height:100%;#infoBoxidtext-align:center; width:100%; height:100%; display:table;#infoid display:table-cell;vertical-align:middle; /*这里可以指个宽度试试，是可以自适应的*/*专为IE6写的*/*html #in
2、foBox position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto*html #infoposition:relative; top:-50%; text-align:center; /*这里可以指个宽度试试，是可以自适应的*/*这理是专用IE7写的，注意id要加上，不然优先JI没有最上边那段NB*/*+html #infoBoxid position:absolute; top:50%; width:100%; text-align:center; display:block;
3、 height:auto*+html #infoidposition:relative; top:-50%; text-align:center; /*这里可以指个宽度试试，是可以自适应的*/#tnnd border:1px solid red; width:500px; margin:0 auto; font-size:12px; line-height:1.8; CSS几个居中问题的解决办法 CSS几个居中问题的解决办法 CSS几个居中问题的解决办法 CSS几个居中问题的解决办法 CSS几个居中问题的解决办法 CSS几个居中问题的解决办法 CSS几个居中问题的解决办法 CSS几个居中问题的
4、解决办法 CSS几个居中问题的解决办法 CSS几个居中问题的解决办法 body padding:0; margin:0; html,body height:100%; #infoBoxidtext-align:center; width:100%; height:100%; display:table; #infoid display:table-cell;vertical-align:middle;*html #infoBox position:absolute; top:50%; width:100%; text-align:center; display:block; height:au
5、to *html #infoposition:relative; top:-50%; text-align:center;*+html #infoBoxid position:absolute; top:50%; width:100%; text-align:center; display:block; height:auto *+html #infoidposition:relative; top:-50%; text-align:center;#tnnd border:1px solid red; width:500px; margin:0 auto; font-size:12px; li
6、ne-height:1.8; CSS几个居中问题的解决办法 CSS几个居中问题的解决办法 CSS几个居中问题的解决办法 CSS几个居中问题的解决办法 CSS几个居中问题的解决办法 CSS几个居中问题的解决办法 CSS几个居中问题的解决办法 CSS几个居中问题的解决办法 CSS几个居中问题的解决办法 CSS几个居中问题的解决办法 下面这个经测试有一个小小的BUG，但是引响不大。比较完美根据内容宽度、高度自适应，垂直水平居中，内容高度超过窗体时，垂直居顶* margin:0; padding:0; list-style:none; font-size:14px;/*-该css reset仅用于demo，请自行换成适合您自己的css reset-*/html height:100%;body height:100%; text-align:center;.centerDiv display:inline-block; zoom:1; *display:inline; vertical-align:middle; text-align:left; width:500px; height:500px; padding:10px; border:1px solid #f60; background:#fc0;.hiddenDiv he
