标签：horizontal 水平垂直 display center 元素
css3实现元素水平垂直居中，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
html,body{
width:100%;
height:100%;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: -o-box;
-o-box-orient: horizontal;
-o-box-pack: center;
-o-box-align: center;
display: -ms-box;
-ms-box-orient: horizontal;
-ms-box-pack: center;
-ms-box-align: center;
display: box;box-orient: horizontal;
box-pack: center;
box-align: center;
}
.main{
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #ccc;
margin: 20px auto;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: -o-box;
-o-box-orient: horizontal;
-o-box-pack: center;
-o-box-align: center;
display: -ms-box;
-ms-box-orient: horizontal;
-ms-box-pack: center;
-ms-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
.main img{
width:70%;
height: 70%;
}
</style>
</head>
<body>
<div class="main">
<img src="login-bg.jpg"/>
</div>
</body>
</html>本文出自 “Shows technology” 博客，请务必保留此出处http://wangzhijun.blog.51cto.com/9660708/1702030
标签：horizontal 水平垂直 display center 元素
原文地址：http://wangzhijun.blog.51cto.com/9660708/1702030
