标签：div水平居中
DIV水平居中实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DIV水平居中</title>
<style>
.parent { width:980px;height:300px;margin:0 auto;text-align:center;background-color:#999;}
.children {display:inline-block;width:100px;height:250px;}
/**+ html .children { display:inline;zoom:1;}
* html .children { display:inline;zoom:1;}*/
.div1{
width:20%;
height:300px;
background:greenyellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
.div1:hover{
width:300px;
}
.div2{
width:20%;
height:300px;
background:greenyellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
.div2:hover{
width:300px;
}
.div3{
width:20%;
height:300px;
background:greenyellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
.div3:hover{
width:300px;
}
.div4{
width:20%;
height:300px;
background:greenyellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
.div4:hover{
width:300px;
}
</style>
</head>
<body>
<div class="parent">
<div class="children div1" style="background-color:green;"></div>
<div class="children div2" style="background-color:red;"></div>
<div class="children div3" style="background-color:yellow;"></div>
<div class="children div4" style="background-color:blue;"></div>
<!-- <div class="children" style="background-color:green;"></div>-->
<!--<div class="children" style="background-color:red;"></div>
<div class="children" style="background-color:yellow;"></div>-->
<!-- <div class="children" style="background-color:blue;"></div>
<div class="children" style="background-color:green;"></div>-->
</div>
</body>
</html>
本文出自 “wennuanyiran” 博客，请务必保留此出处http://dingzhaoqiang.blog.51cto.com/5601059/1703089
标签：div水平居中
原文地址：http://dingzhaoqiang.blog.51cto.com/5601059/1703089
