Skip to content

Instantly share code, notes, and snippets.

@tongxunlu

tongxunlu/终极实现的水平垂直居中实例-兼容所有浏览器

Last active January 3, 2016 02:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tongxunlu/4a5d3c0dd3e3ddde2d85 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tongxunlu/4a5d3c0dd3e3ddde2d85 to your computer and use it in GitHub Desktop.
Download ZIP
终极实现的水平垂直居中实例-兼容所有浏览器
Raw
终极实现的水平垂直居中实例-兼容所有浏览器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>水平垂直居中</title>
<style type="text/css">
#demo{
height:100px;
text-align:center;
font-size:0;
}
#demo:after,#demo span{
display:inline-block;
*display:inline;
*zoom:1;
width:0;
height:100%;
vertical-align:middle;
}
#demo:after{
content:'';
}
#demo p{
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:middle;
font-size:16px;
}
.baseline{display:inline-block;
*display:inline;
*zoom:1;
width:0;
height:100%;
vertical-align:middle;}
#demo { *zoom:expression(function(x){x.style.zoom = "1";var _tag=document.createElement('span');_tag.innerHTML='&nbsp;';
_tag.className='baseline';x.appendChild(_tag);}(this));}
</style>
</head>
<!--参考-->
<!--http://demo.doyoe.com/css/alignment/ 未知尺寸元素水平垂直居中-->
<!--http://www.dabaoku.com/jiaocheng/wangye/css/201102248939.shtml 另辟蹊径，CSS设置垂直居中-->
<body>
<div id="demo">
<p>这是一个终极实现的水平垂直居中实例</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment