CSS解决未知高度的垂直水平居中自适应问题
网站建设 2023-01-28 21:38www.1681989.com免费网站
今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。
从最简单的开始…………
一、如何让一个DIV水平居中？
这个简单不作过多说明！
<style>
body { text-align:center}
#fo{ marg:0 auto; width:500px; text-align:left; border:1px solid #3333FF}
</style>
</head>
<body>
<div id="fo">this is test.</div>
</body>
提示您可以先修改部分代码再运行
二、DIV已知高度，如何让他水平加垂直居中？
如果想水平加垂直居中的DIV已知高度和宽度，是最好办的了！
1、先让这个DIV绝对定位；
2、让他距离上边50%，左边50%；这会这个DIV的左上角这个点就是窗口的正中间；
3、因为已经知道了这个DIV的高和宽了，那么再从这里点向左移动总宽的一半就可以了，也就是200PX； 向上呢也同理；
<style>
#fo{:50%;left:50%; position:absolute; width:600px; height:400px; marg:-200px -300px; border:1px solid #f00;}
</style>
<div id="fo">this is test.</div>
提示您可以先修改部分代码再运行
三、DIV不知道高度怎么让他水平和垂直居中？
这个比较麻烦，用上边的方法的一半再加一些代码才能实现！
我先按上边代码意思接着写，注意，下边的代码是我写好的第一步，只支持IE6和IE7，不过先看一下！
<style>
body {paddg:0; marg:0; }
#foBox{ position:absolute; :50%; width:100%; text-align:center;}
#fo{position:relative; :-50%; right:0; border:1px solid #333399; text-align:center;} /这里可以指个宽度试试，是可以自适应的/
</style>
<div id="foBox">
<div id="fo">
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 {paddg:0; marg:0; }
/这些是专用FIREFOX写的，注意IE7也认识/
html,body{ height:100%;}
#foBox[id]{text-align:center; width:100%; height:100%; display:table;}
#fo[id]{ display:table-cell; vertical-align:middle;} /这里可以指个宽度试试，是可以自适应的/
/专为IE6写的/
html #foBox{ position:absolute; :50%; width:100%; text-align:center; display:block; height:auto}
html #fo{position:relative; :-50%; border:1px solid #333399; text-align:center;} /这里可以指个宽度试试，是可以自适应的/
/这理是专用IE7写的，注意[id]要加上，不然优先JI没有最上边那段NB/
+html #foBox[id]{ position:absolute; :50%; width:100%; text-align:center; display:block; height:auto}
+html #fo[id]{position:relative; :-50%; border:1px solid #333399; text-align:center;} /这里可以指个宽度试试，是可以自适应的/
</style>
<div id="foBox">
<div id="fo">
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中没有那个边框；对的…… 如果你看一下fo这个DIV，他其它是占高度100%的；这时的同一个布局在不同的浏览器是展示出来隐在效果已经完全不一样了；那么怎么办？ 所以，再用一个办法；再加一个空的DIV就行了，我起了个好名字，叫tnnd； 的效果如下；
提示您可以先修改部分代码再运行
后边这种是最麻烦的，重点在于IE67和FIREFOX中间的差别和他们相互之间是如何的一些关系；我看过很多关于这个问题的解决方法，都不是特别的理想，希望这种方法能解决大部分的问题！
本来以为半小时弄完，没有想到卡在FIREFOX这里了，弄了二个多小时！周末了，不早了，凌晨230了，睡了！晚安……
相关资料可参考
1、CSS解决未知高度垂直居中 -- 垂直居中方面可参考一下
2、CSS作的小灯笼效果 -- hack方面参考
网络推广网站推广转载请注明出处子鼠
从最简单的开始…………
一、如何让一个DIV水平居中？
这个简单不作过多说明！
复制代码
代码如下:<style>
body { text-align:center}
#fo{ marg:0 auto; width:500px; text-align:left; border:1px solid #3333FF}
</style>
</head>
<body>
<div id="fo">this is test.</div>
</body>
二、DIV已知高度，如何让他水平加垂直居中？
如果想水平加垂直居中的DIV已知高度和宽度，是最好办的了！
1、先让这个DIV绝对定位；
2、让他距离上边50%，左边50%；这会这个DIV的左上角这个点就是窗口的正中间；
3、因为已经知道了这个DIV的高和宽了，那么再从这里点向左移动总宽的一半就可以了，也就是200PX； 向上呢也同理；
复制代码
代码如下:<style>
#fo{:50%;left:50%; position:absolute; width:600px; height:400px; marg:-200px -300px; border:1px solid #f00;}
</style>
<div id="fo">this is test.</div>
三、DIV不知道高度怎么让他水平和垂直居中？
这个比较麻烦，用上边的方法的一半再加一些代码才能实现！
我先按上边代码意思接着写，注意，下边的代码是我写好的第一步，只支持IE6和IE7，不过先看一下！
复制代码
代码如下:<style>
body {paddg:0; marg:0; }
#foBox{ position:absolute; :50%; width:100%; text-align:center;}
#fo{position:relative; :-50%; right:0; border:1px solid #333399; text-align:center;} /这里可以指个宽度试试，是可以自适应的/
</style>
<div id="foBox">
<div id="fo">
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 {paddg:0; marg:0; }
/这些是专用FIREFOX写的，注意IE7也认识/
html,body{ height:100%;}
#foBox[id]{text-align:center; width:100%; height:100%; display:table;}
#fo[id]{ display:table-cell; vertical-align:middle;} /这里可以指个宽度试试，是可以自适应的/
/专为IE6写的/
html #foBox{ position:absolute; :50%; width:100%; text-align:center; display:block; height:auto}
html #fo{position:relative; :-50%; border:1px solid #333399; text-align:center;} /这里可以指个宽度试试，是可以自适应的/
/这理是专用IE7写的，注意[id]要加上，不然优先JI没有最上边那段NB/
+html #foBox[id]{ position:absolute; :50%; width:100%; text-align:center; display:block; height:auto}
+html #fo[id]{position:relative; :-50%; border:1px solid #333399; text-align:center;} /这里可以指个宽度试试，是可以自适应的/
</style>
<div id="foBox">
<div id="fo">
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中没有那个边框；对的…… 如果你看一下fo这个DIV，他其它是占高度100%的；这时的同一个布局在不同的浏览器是展示出来隐在效果已经完全不一样了；那么怎么办？ 所以，再用一个办法；再加一个空的DIV就行了，我起了个好名字，叫tnnd； 的效果如下；
后边这种是最麻烦的，重点在于IE67和FIREFOX中间的差别和他们相互之间是如何的一些关系；我看过很多关于这个问题的解决方法，都不是特别的理想，希望这种方法能解决大部分的问题！
本来以为半小时弄完，没有想到卡在FIREFOX这里了，弄了二个多小时！周末了，不早了，凌晨230了，睡了！晚安……
相关资料可参考
1、CSS解决未知高度垂直居中 -- 垂直居中方面可参考一下
2、CSS作的小灯笼效果 -- hack方面参考
网络推广网站推广转载请注明出处子鼠
上一篇：css 横排 实现代码
下一篇：CSS cursor 属性 -- 鼠标指针样式效果
网站设计
- 静宁会SEO的网站建设公司：全面提升您的网络影
- 提升在线业务的关键：选择最佳的丽水网站建设
- 浙江网站优化发展潜力如何
- 井研专业的网站建设公司：打造您的在线品牌
- 灵山SEO网站建设公司：提升您的在线业务表现
- 蒙城网站建设优化公司：提升您网站表现的理想
- 阳谷企业网站优化：提升线上业务力的关键
- 樟树专业的网站建设公司：打造您在线业务的坚
- 通河百度SEO排名的策略与技巧
- 重庆百度快照排名如何进行精准的客户引流
- 重庆百度快照排名
- 常宁便宜的建站公司：助您轻松打造在线业务
- 巫溪百度网站优化：提升网站曝光率与流量的关
- 湖北整站优化怎么做才能放大客户需求
- 闸北网站建设多少钱？全面解析与预算规划
- 辽宁企业网站优化怎么做电话营销