您的位置：首页 > Web前端 > CSS

[CSS]多浏览器兼容的垂直居中，兼容多个IE

2015-12-08 21:40 585 查看
相信你都是在兼容垂直居中而烦恼，翻阅多个网站总是找不到理想的方法而苦恼，来到这里你的问题解决了！如果对你有帮助请点个赞，谢谢。

多兼容垂直居中，在IE6-9亲自测试并通过

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>不定高垂直居中(IE6+)</title>
<style>
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}

/* 不定高垂直居中(IE6+) */
/* PS:<div class="valigner-fix"></div>必须要有，为了兼容 */
.valigner{/* 填写固定高度 */}
.valigner-fluid{display:table;width:100%;height:100%;min-height:100%}
.valigner-wrap{display:table-cell;vertical-align:middle;width:100%;height:100%}
.valigner-fix{display:none;width:1px;margin-left:-1px}

/* 以下可用<!--[if lte IE 7]><![endif]-->包含 */
.valigner-fix,.valigner-body{*display:inline-block;*vertical-align:middle}
.valigner-body{*width:100%}
.valigner-fix{*height:100%}
.valigner-fix,.valigner-body{*display:inline;/* 不能合并到上面 */}
</style>
</head>

<body>
<div class="valigner-fluid">
<div class="valigner-wrap">
<div class="valigner-body">
不定高垂直居中(IE6+)
</div>
<div class="valigner-fix"></div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航