DDR爱好者之家

CSS解决未知高度的垂直水平居中自适应问题
站长资源 2024/11/24 佚名
21 1538
DDR爱好者之家 Design By 杰米
今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器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>


提示：您可以先修改部分代码再运行
二、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>


提示：您可以先修改部分代码再运行
三、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>


提示：您可以先修改部分代码再运行
那么，如果让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>


提示：您可以先修改部分代码再运行
这时你又会发现，在IE和FIREFOX中怎么效果不一样呢？FIREFOX中没有那个边框；对的…… 如果你看一下info这个DIV，他其它是占高度100%的；这时的同一个布局在不同的浏览器是展示出来隐在效果已经完全不一样了；那么怎么办？ 所以，再用最后一个办法；再加一个空的DIV就行了，我起了个好名字，叫tnnd； 最后的效果如下；

提示：您可以先修改部分代码再运行
后边这种是最麻烦的，重点在于IE67和FIREFOX中间的差别和他们相互之间是如何的一些关系；我看过很多关于这个问题的解决方法，都不是特别的理想，希望这种方法能解决大部分的问题！
本来以为半小时弄完，没有想到卡在FIREFOX这里了，弄了二个多小时！周末了，不早了，凌晨2：30了，睡了！晚安……

相关资料可参考：
1、CSS解决未知高度垂直居中 -- 垂直居中方面可参考一下
2、CSS作的小灯笼效果 -- hack方面参考
转载请注明出处：子鼠
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米