主页 > 网站建设 >

CSS 实现未知内容高度的垂直水平居中(改良版)

网站建设 2023-01-28 21:38www.1681989.com免费网站
垂直居中在IE浏览器下的实现比较难实现，而更难实现的应该是未知内容高度的垂直水平居中！还好网上也有很多高人发布了一些解决的方法！这里我进行了一些改良，兼容FF，IE6，IE7，Opera...如发现问题有劳回复评论！

复制代码
代码如下:

<mce:style><!--
{marg:0;paddg:0;border:none;font:12px Verdana,"宋体";}
#outer{height:400px;width:400px;display:table;background-color:#08f;overflow:hidden;position:relative;}
#middle{width:100%;display:table-cell;vertical-align:middle;position:absolute;:50%;}
#ner{position:relative;:-50%;text-align:center; background:#F00;}
#ner img{vertical-align:middle;position:relative;:-1px;}
--></mce:style><style mce_bogus="1">{marg:0;paddg:0;border:none;font:12px Verdana,"宋体";}
#outer{height:400px;width:400px;display:table;background-color:#08f;overflow:hidden;position:relative;}
#middle{width:100%;display:table-cell;vertical-align:middle;position:absolute;:50%;}
#ner{position:relative;:-50%;text-align:center; background:#F00;}
#ner img{vertical-align:middle;position:relative;:-1px;}</style>
<body>
<div id="outer">
<div id="middle">
<div id="ner">
<!--可以放任何文本标签<p/>等或者图片标签<img/>-->
</div>
</div>
</div>
</body>
上一篇：页面位置 top、postop、scrolltop、offsetTop、scrollHei 下一篇：input 按钮显示差异的解决方法

网站设计

Copyright © 2016-2025 www.1681989.com 推火网 版权所有 Power by